X Editor 설치 와 설정
Step1. X Editor(javascrpt, css)를 HEAD에 추가
<head>
<link href="/xeditor.min.css" type="text/css" rel="stylesheet" charset="utf-8">
<script src="/xeditor.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>
</head>
Step2. X Editor를 삽입할 곳에 DIV Tag를 추가하고 ID를 만든다.
<body>
<div id="xeditorEX"></div>
</body>
Step3. X Editor 생성
<script language="javascript">
var xeditorOptions = {}; // Xeditor Options
var xeditorFrame = document.body.querySelector('#xeditorEX');
var xeditor = new Xeditor(xeditorFrame, xeditorOptions);
</script>
Step4. X Editor Toolbar 및 세부 옵션 설정
<script language="javascript">
//===============================================
// Toolbar Features Options
//===============================================
var toolbarOptions = [
'bold', 'italic', 'underline', 'strike', 'clean', // Text Style
'blockquote' , // Block Quote Input
'code-line' , // Line Code Input
'code-block' , // highlightjs - Language Code Highlight
'link' , // Link - Input
'image' , 'video' , 'audio', 'upload', // Upload - Type Input
'formula' , // KaTeX - Math Symbol Input
'map' , // Map - Map Input
{ 'header' : 1 }, { 'header' : 2 } , // ( H1 , H2 ) - Custom font header
{ 'list' : 'ordered'}, { 'list' : 'bullet' } , // ( ordered, bullet ) - Ordered list
{ 'indent' : '+1' }, { 'indent' : '-1' } , // ( +1 , -1 ) - indent/outdent
{ 'script' : 'sub' }, { 'script' : 'super' } , // ( sub , super ) - superscript/subscript
{ 'direction': 'rtl' } , // ( '' , 'rtl' ) - text direction(Toggle)
{ 'align' : ['center', 'right', 'justify' ] } , // [ DropDown ] - text Align
{ 'size' : ['small', false, 'large', 'huge' ] } , // [ DropDown ] - font Size
{ 'header': [1, 2, 3, 4, 5, 6 ] } , // [ DropDown ] - font Header
{ 'font' : ['Arial', 'Serif','Verdana','Symbol'] } , // [ DropDown ] - font Family
{ 'color' : [] }, { 'background': [] } , // [ Picker ] - Color Picker
{ 'table' : [] }, // [ Picker ] - Table Picker
];
//===============================================
// Xeditor Main Options
//===============================================
var xeditorOptions = {
isTooltip : true , // tooltip : [true, false]
readOnly : false, // Read Only : [true, false] - (Text Input Disabled)
lang : 'ko' , // language : ['ko','en' ]
isSpellcheck : false, // spell check : [true, false]
placeholder : 'Input Youer Contents.',
height : '500px' , minHeight: '170px', maxHeight: '100%', // Xeditor Hgight
width : 'calc(100% - 50px)' , minWidth : '200PX', maxWidth : '100%', // Xeditor Width
mapSetting : { // Map Setting
defaultProvider: 'OpenLayers',
markerIcon : '',
markerWidth : '26',
markerHeight : '50',
startLat : 0,
startLng : 0,
Provider : { 'Google': true, 'Naver': true, 'Kakao': true, 'OpenLayers': true }
} ,
modules : { // Module Add
syntax : true, // [ highlightjs] - Language Code Highlight Library
formula: true, // [ KaTeX ] - Math library
toolbar: toolbarOptions, // [ Toolbar ] - Toolbar Options Add
},
};
</script>
Step5. X Editor에서 입력한 내용 확인(Viewer)
1. X Editor 서식 css 적용
<head>
<link href="/xeditor.min.css" type="text/css" rel="stylesheet" charset="utf-8">
</head>
2. X Editor 내용 보기
<body>
<div class="xe-editor">
X editor로 작성한 HTML내용 삽입
</div>
</body>
3. X Editor 내용에서 XmapManager 적용
<script language="javascript">
var mapFrameList = document.body.querySelectorAll('.xe-editor .xe-map-frame');
for(var idx=0; idx<mapFrameList.length; idx++)
{
var mapframe = mapFrameList[idx];
var markerList = mapframe.querySelectorAll('.xe-tooltip-map-save-list');
var markerAppendList = [];
for(var mcnt=0; mcnt<markerList.length; mcnt++)
{
var marker = markerList[mcnt];
var mapIndex = marker.getAttribute('data-map-index');
var mapLat = marker.getAttribute('data-map-lat');
var mapLng = marker.getAttribute('data-map-lng');
var mapTitle = marker.getAttribute('data-map-title');
var mapContent = marker.getAttribute('data-map-content');
var mapLink = marker.getAttribute('data-map-link');
var lat = parseFloat(mapLat);
var lng = parseFloat(mapLng);
var markerData = { markerLat : lat ,
markerLng : lng ,
markerIcon : 'marker01' ,
markerLabel : (mcnt+1) ,
markerTitle : mapTitle,
markerLink : mapLink ,
markerContent: mapContent,
labelImageUrl: '',
labelContent : '',
};
markerAppendList.push(markerData);
}
var xmapManagerOption = { MapDataList: markerAppendList }; // XMapManager Option
new XmapManager(mapframe, xmapManagerOption ); // XmapManager
}
</script>
※. XmapManager의 세부 설정은
X MapManager 설치 와 설정에서 확인하세요.