본문바로가기

Alopex UI

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}
      • 에디터의 설정을 변경 할 수 있습니다.
$('#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');
});

  • parameter
    • 'createLink', {String} text , {String} url , {Boolean} newWindow
      • 에디터에 link를 추가 할 수 있습니다.
$('#webeditor5').webeditor('createLink', {
	text: '클릭해주세요.',
	url: 'https://ui.alopex.io',
	newWindow: true
});
$('#webeditor5').webeditor('unlink');

insertImage

  • parameter
    • '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를 생성 할 수 있습니다.
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'
      • 한글 설정
본문 상단으로 이동

This Site created with Alopex UI

Icon licensed under CC BY 3.0

Copyright © 2020 SK Holdings C&C. All rights reserved.