Plugin
WebEditor
Basic
웹 에디터(WebEditor) 컴포넌트는 쉽게 적용 할 수 있는 웹문서를 편집할 수 있는 컴포넌트입니다.
<div class="WebEditor"><p>Hello World</p></div>
디렉토리 구조
webeditor 라이브러리 전체 구성은 아래와 같습니다.
* 라이브러리 내 webeditor 폴더 위치
AlopexUI_library
┗━ script
┗━━ src
┗━ webeditor (folder)
* webeditor 폴더 구조
webeditor (folder)
┣━ alopex-webeditor-setup.js
┣━ alopex-webeditor.css
┗━ alopex-webeditor.min.js
적용
webeditor 라이브러리 적용 방법입니다.
아래와 같이 필수/선택적으로 적용하도록 합니다.
웹에디터 구현 시
<!DOCTYPE html> <!--공통 (필수)-->
<link rel="stylesheet" type="text/css" href="{path}/script/lib/alopex/src/webeditor/alopex-webeditor.css" />
<!--공통 (필수)-->
<script src="{path}/script/lib/alopex/src/webeditor/alopex-webeditor.min.js"></script><!--공통 (필수)-->
<script src="{path}/script/lib/alopex/src/webeditor/alopex-webeditor-setup.js"></script> <!--공통 (필수)-->
Attributes
class {string}
- "WebEditor"
- 해당 엘리먼트가 WebEditor 컴포넌트라는 것을 지정합니다.
Functions
웹 에디터(WebEditor) API를 이용하여 설정을 변경함은 물론 데이터 추출, 데이터 삽입, Disable, Enable 등 API를 호출할 수 있습니다.
.webeditor(option)
- parameter
- {Json Object}
- 에디터의 설정을 변경 할 수 있습니다.
- {Json Object}
$('#webeditorOpt').webeditor({
height: 200, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor,
toolbar: [
//[groupName, [list of button]]
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link','unlink','picture', 'video']],
['height', ['height']]
],
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
popover: {
image: [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatCenter', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
['custom', ['imageAttributes']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
['span', ['merge', 'unMerge']],
['style', ['cellStyle', 'tableStyle']]
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
},
callbacks: {
onImageUpload: function (files) {
$(this).webeditor('insertImage', 'https://grid.alopex.io/styles/img/logo_small.png');
},
onEnter: function () {
console.log('Enter/Return key pressed---');
}
}
});
height {int}
- 에디터의 높이를 설정. height가 설절되지 않으면 내용에 따라 높이값이 조정
minHeight {int}
- 최소 높이값
maxHeight {int}
- 최대 높이값
toolbar {object}
- 에디터에 사용되는 툴바
<div id="webeditor3">
<p>Hello World</p>
</div>
$('#webeditor3').webeditor({
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
- fontNames {object}
- 에디터에 사용될 수 있는 font 이름 정보
- focus {boolean}
- 에디터가 렌더링 된 후 포커스 주기
<div id="webeditor4"></div>
$('#Webeditor4').webeditor({
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
lang: 'ko-KR' // default: 'en-US'
});
popover {object}
- 이미지, 링크등을 클릭했을때 노출 되는 메뉴
callbacks {object}
- Function 참조
<div id="webeditor2"></div>
<button id="btnGetContent" class="Button">Get Content</button>
<button id="btnSetContent" class="Button">Set Content</button>
<button id="btnSetDisable" class="Button">Set Disable</button>
<button id="btnSetEnable" class="Button">Set Enable</button>
$('#webeditor2').webeditor({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null // set maximum height of editor
});
$('#btnGetContent').on('click', function () {
alert($('#webeditor2').webeditor('code'));
});
$('#btnSetContent').on('click', function () {
$('#webeditor2').webeditor('code', '<p>입력 코드</p>');
});
$('#btnSetDisable').on('click', function () {
$('#webeditor2').webeditor('disable');
});
$('#btnSetEnable').on('click', function () {
$('#webeditor2').webeditor('enable');
});
createLink
- parameter
- 'createLink', {String} text , {String} url , {Boolean} newWindow
- 에디터에 link를 추가 할 수 있습니다.
- 'createLink', {String} text , {String} url , {Boolean} newWindow
$('#webeditor5').webeditor('createLink', {
text: '클릭해주세요.',
url: 'https://ui.alopex.io',
newWindow: true
});
$('#webeditor5').webeditor('unlink');
insertImage
- parameter
- 'insertImage', {String} url, {String|Function} filename - optional
- 에디터에 이미지를 추가 할 수 있습니다.
- 'insertImage', {String} url, {String|Function} filename - optional
$('#webeditor5').webeditor('insertImage', url, function ($image) {
$image.css('width', $image.width() / 3);
$image.attr('data-filename', 'retriever');
});
insertNode
- parameter
- 'insertNode',{Object}
- 에디터에 tag node를 생성 할 수 있습니다.
- 'insertNode',{Object}
var node = document.createElement('div');
// @param {Node} node
$('#webeditor5').webeditor('insertNode', node);
Callbacks
에디터에 지원되는 callback 및 jQuery 사용자 callback 를 정의 합니다.
onEnter
// onEnter callback
$('#webeditor').webeditor({
callbacks: {
onEnter: function() {
console.log('Enter/Return key pressed');
}
}
});
// webeditor.enter
$('#webeditor').on('webeditor.enter', function() {
console.log('Enter/Return key pressed');
});
onImageUpload
- webEditor 컨포넌트는 기본적으로 base64 dataURL로 인코딩한 이미지 정보는 IMG tag에 넣어 본문 내용에 담고 있습니다. 만약 이미지를 서버로 upload시키고 해당 이미지 url만 본문에 삽입하고자 할때는 onImageUpload Callback를 활용하여 적용 할 수 있습니다.
// onImageUpload callback
var postEditor = $("#webeditor").webeditor({
callbacks: {
onImageUpload: function(files) {
sendFile(files[0]);
}
}
});
function sendFile(file) {
var formData = new FormData();
formData.append("photo", file);
var fileData = URL.createObjectURL(file);
postEditor.webeditor('insertImage', fileData,function ($image) {
$.ajax({
url: "/photo/upload",
data: formData,
cache: false,
contentType: false,
processData: false,
dataType:"json",
type: 'POST',
success: function(data){
$image.attr('src', data.url);
}
});
});
}
onInit
// onInit callback
$('#webeditor').webeditor({
callbacks: {
onInit: function() {
console.log('webeditor is launched');
}
}
});
// webeditor.init
$('#webeditor').on('webeditor.init', function() {
console.log('webeditor is launched');
});
onPaste
// onPaste callback
$('#webeditor').webeditor({
callbacks: {
onPaste: function(e) {
console.log('Called event paste');
}
}
});
// webeditor.paste
$('#webeditor').on('webeditor.paste', function(e) {
console.log('Called event paste');
});
Setup
setup 자바스크립트에서 웹 에디터(WebEditor)의 기본 속성을 공통으로 설정합니다.
$a.setup('webeditor', {
height: 200, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null
});
- locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'
- 한글 설정
- 'ko'(default) | 'en' | 'zh' | 'ja'