X Editor메인 Options
X Editor메인 설정 옵션
| Name | Type | Default(value) | Description | |
| lang | String | 'ko','en' | 툴팁의 언어 설정 | |
| readOnly | boolean | true, false | 에디터 입력을 disabled할지 여부 | |
| isTooltip | boolean | true, false | 메뉴의 툴팁 사용 여부 | |
| isSpellcheck | boolean | true, false | 맞춤법 검사기능 사용 여부 | |
| placeholder | String | '' | placeholder Text | |
| height | String | PX, %, VH | 에디터 높이: calc(100vh - 100px) or 500px or 50% | |
| width | String | PX, %, VW | 에디터 넓이: calc(100vw - 50px ) or 500px or 50% | |
| mapSetting: {} | defaultProvider | String | 'OpenLayers' | 'Google','Naver','Kakao','OpenLayers' |
| markerIcon | String | mark icon | ||
| markerWidth | String | mark icon Width | ||
| markerHeight | String | mark icon Height | ||
| startLat | Long | 지도의 기본 위치 GPS Latitude(위도) | ||
| startLng | Long | 지도의 기본 위치 GPS Longitude(경도) | ||
| Provider | {} | { 'Google': true, 'Naver': true, 'Kakao': true, 'OpenLayers': true } | ||
| modules: {} | syntax | boolean | true, false | highlightjs Library의 사용 여부 |
| formula | boolean | true, false | KaTeX Math library 사용 여부 | |
| toolbar | [] | [toolbar option] | 사용할 Toolbar의 기능을 추가/삭제 한다 | |
Map Setting - Map Provider
<head> <!-- ###### [Map Google] ##### --> <script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?key=[ YourAppKEY ]&callback=initMapGoogle®ion=kr&senser=true"></script> <!-- ###### [Map Kakao] ##### --> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[ YourAppKEY ]&libraries=services,clusterer,drawing"></script> <!-- ###### [Map Naver] ##### --> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=[ YourAppKEY ]&submodules=geocoder"></script> </head>
module
1. syntax - Language Code Highlight Library
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/styles/a11y-dark.min.css">
</head>
2. formula - KaTeX - Math library
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css" integrity="sha512-BiJq/S3Wl+GAHtgicWXCK4s+FLFRsDyDkBz8jFfSC5ZlZ45FPlsqc8xB4UUlKUOyVX7iq2xEoOJGKNcW98rQdA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js" integrity="sha512-TFaeuT3cYzCD8XaZh7t7f+e7AdCB3SuAvV4hEPwhysrbHSK0SXUhXJfv53fnWCMWmw2/uMHgxuzSlcrW+4PSdg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/contrib/auto-render.min.js" integrity="sha512-CzIEOUs11SQ7tekLhEe5gil9kDip4RTJZVf7pSjlxOdVaYYHEcQflhunPz2Q/onNC4slL9jpKjvNgzPAAxEpew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
3. [ Toolbar ] - Toolbar Options Add
[ 'bold', 'italic', 'underline', 'strike', 'clean', 'blockquote', 'link', 'image', 'video', 'audio', 'upload', 'formula', 'map' ]
X Editor 툴바 Options
X Editor 툴바 설정 옵션
| Icon | Name | Type | Default(value) | Description |
 | 'bold' | N/A | N/A | |
 | 'italic' | N/A | N/A | |
 | 'underline' | N/A | N/A | |
 | 'strike' | N/A | N/A | |
 | 'clean' | N/A | N/A | |
 | 'link' | N/A | N/A | |
 | 'image' | N/A | N/A | |
 | 'video' | N/A | N/A | |
 | 'audio' | N/A | N/A | |
 | 'upload' | N/A | N/A | |
 | 'formula' | N/A | N/A | |
 | 'map' | N/A | N/A | |
 | 'blockquote' | N/A | N/A | |
 | 'code-line' | N/A | N/A | |
 | 'code-block' | N/A | N/A | |
 | { 'header' : } | Number | 1 | |
 | { 'header' : } | Number | 2 | |
 | { 'list' : } | String | 'ordered' | |
 | { 'list' : } | String | 'bullet' | |
 | { 'script' : } | String | 'sub' | |
 | { 'script' : } | String | 'super' | |
 | { 'indent' : } | String | '+1' | |
 | { 'indent' : } | String | '-1' | |
 | { 'direction' : } | String | 'rtl' | |
 | { 'color' : [] } | Array[] | [null] | Picker - font color |
 | { 'background': [] } | Array[] | [null] | Picker - font background color |
 | { 'table' : [] } | Array[] | [null] | Picker - table |
 | { 'align' : [] } | Array[String] | ['center', 'right', 'justify'] | DropDown - align |
 | { 'size' : [] } | Array[String] | ['small', 'large', 'huge'] | DropDown - size |
 | { 'header' : [] } | Array[Number] | [1, 2, 3, 4, 5, 6] | DropDown - header |
 | { 'font' : [] } | Array[String] | ['Serif','Monospace','Arial','Verdana'] | DropDown - font |
X Editor Options 예시
X Editor Options 전체 예시
var xeditorOptions = {
lang : 'ko' ,
isTooltip : true ,
readOnly : false ,
isSpellcheck : true ,
placeholder : 'Input Youer Contents...',
height : 'calc(100vh - 70px)' , minHeight : '100PX', maxHeight: '90VH' ,
width : '100%', minWidth : '300PX', maxWidth : '100%' ,
mapSetting : { defaultProvider: 'OpenLayers',
markerIcon : '',
markerWidth : '26',
markerHeight : '50',
startLat : 0,
startLng : 0,
Provider : {'Google':true, 'Naver' :true, 'Kakao' :true, 'OpenLayers':true }
} ,
modules : {
syntax : true,
formula: true,
toolbar: [
'bold', 'italic', 'underline', 'strike', 'clean',
'link', 'image', 'video', 'audio', 'upload',
'formula', 'map',
'blockquote', 'code-line', 'code-block',
{ 'header' : 1 },
{ 'header' : 2 },
{ 'list' : 'ordered'},
{ 'list' : 'bullet' },
{ 'script' : 'sub' },
{ 'script' : 'super' },
{ 'indent' : '+1' },
{ 'indent' : '-1' },
{ 'direction' : 'rtl' },
{ 'color' : [] },
{ 'background': [] },
{ 'table' : [] },
{ 'align' : ['center', 'right', 'justify'] } ,
{ 'size' : ['small', 'large', 'huge' ] } ,
{ 'header' : [1, 2, 3, 4, 5, 6] } ,
{ 'font' : ['Serif','Monospace','Arial','Verdana'] } ,
]
}
};
var xeditor = new Xeditor(document.body.querySelector('#xeditorEX'), xeditorOptions);
X Editor Options 툴바 Group 메뉴 설정 예시
var xeditorOptions = {
lang : 'ko' ,
isTooltip : true ,
readOnly : false ,
isSpellcheck : true ,
placeholder : 'Input Youer Contents...',
height : 'calc(100vh - 70px)' , minHeight : '100PX', maxHeight: '90VH' ,
width : '100%', minWidth : '300PX', maxWidth : '100%' ,
mapSetting : { defaultProvider: 'OpenLayers',
markerIcon : '',
markerWidth : '26',
markerHeight : '50',
startLat : 0,
startLng : 0,
Provider : {'Google':true, 'Naver' :true, 'Kakao' :true, 'OpenLayers':true }
} ,
modules : {
syntax : true,
formula: true,
toolbar: [
[ //Menu Group
'bold', 'italic', 'underline', 'strike', 'clean'
],
[ //Menu Group
'link', 'image', 'video', 'audio', 'upload'
],
[ //Menu Group
'formula', 'map'
],
[ //Menu Group
'blockquote', 'code-line', 'code-block'
],
[ //Menu Group
{ 'header' : 1 },
{ 'header' : 2 },
],
[ //Menu Group
{ 'list' : 'ordered'},
{ 'list' : 'bullet' },
],
[ //Menu Group
{ 'script' : 'sub' },
{ 'script' : 'super' },
],
[ //Menu Group
{ 'indent' : '+1' },
{ 'indent' : '-1' },
{ 'direction' : 'rtl' },
],
[ //Menu Group
{ 'color' : [] },
{ 'background': [] },
{ 'table' : [] },
],
[ //Menu Group
{ 'align' : ['center', 'right', 'justify'] } ,
{ 'size' : ['small', 'large', 'huge' ] } ,
{ 'header' : [1, 2, 3, 4, 5, 6] } ,
{ 'font' : ['Serif','Monospace','Arial','Verdana'] } ,
]
]
}
};
var xeditor = new Xeditor(document.body.querySelector('#xeditorEX'), xeditorOptions);
X Editor Options 툴바 Single 메뉴 설정 예시
var xeditorOptions = {
lang : 'ko' ,
isTooltip : true ,
readOnly : false ,
isSpellcheck : true ,
placeholder : 'Input Youer Contents...',
height : 'calc(100vh - 70px)' , minHeight : '100PX', maxHeight: '90VH' ,
width : '100%', minWidth : '300PX', maxWidth : '100%' ,
mapSetting : { defaultProvider: 'OpenLayers',
markerIcon : '',
markerWidth : '26',
markerHeight : '50',
startLat : 0,
startLng : 0,
Provider : {'Google':true, 'Naver' :true, 'Kakao' :true, 'OpenLayers':true }
} ,
modules : {
syntax : true,
formula: true,
toolbar: [
'bold', 'italic', 'underline', 'strike', 'clean' ,
'link', 'image', 'video', 'audio', 'upload' ,
'formula', 'map' ,
'blockquote', 'code-line', 'code-block' ,
{ 'header' : 1 },
{ 'header' : 2 },
{ 'list' : 'ordered'},
{ 'list' : 'bullet' },
{ 'script' : 'sub' },
{ 'script' : 'super' },
{ 'indent' : '+1' },
{ 'indent' : '-1' },
{ 'direction' : 'rtl' },
{ 'color' : [] },
{ 'background': [] },
{ 'table' : [] },
{ 'align' : ['center', 'right', 'justify'] } ,
{ 'size' : ['small', 'large', 'huge' ] } ,
{ 'header' : [1, 2, 3, 4, 5, 6] } ,
{ 'font' : ['Serif','Monospace','Arial','Verdana'] } ,
]
}
};
var xeditor = new Xeditor(document.body.querySelector('#xeditorEX'), xeditorOptions);