#1087 ckeditor 정리

- xeEditor plugin 제거 및 app로 변경
- ckeditor config를 app 파일로 이동
- 툴바 접기 설정이 잘못 반영된 문제 수정

common/js/plugins/ckeditor/plugin.load

@@ -1,2 +1 @@
 ckeditor/ckeditor.js
-xeEditor.plugin.js

common/js/plugins/ckeditor/xeEditor.plugin.js

@@ -1,76 +0,0 @@
-(function($){
-	"use strict";
-	var App = window.xe.getApp('xeEditorApp')[0];
-	var CK = window.CKEDITOR;
-
-	var xeCKEditor = App.createPlugin("CKEditor", {
-		instance_prefix : 'ckeditor_instance_',
-
-		init : function() {
-			var self = this;
-			CKEDITOR.on('instanceCreated', function(evt){
-				self.cast('CKEDITOR_CREATED');
-			});
-
-			CKEDITOR.on('ready', function(evt){
-				self.cast('CKEDITOR_READY');
-			});
-
-			CKEDITOR.on('instanceReady', function(evt){
-				self.cast('CKEDITOR_INSTANCE_READY');
-			});
-
-			CKEDITOR.on('instanceLoaded', function(evt){
-				self.cast('CKEDITOR_LOADED');
-			});
-		},
-		editorInit : function(sequence, obj) {
-			var self = this;
-			var $editor_area = jQuery("#ckeditor_instance_"+sequence);
-			var $form     = $editor_area.closest('form');
-			var $contentField = $('input[name=' + obj.content_key + ']');
-			var ckconfig = obj.ckconfig || {};
-			ckconfig.xe_editor_sequence = sequence;
-
-			$form.attr('editor_sequence', sequence);
-
-			var insance = CKEDITOR.appendTo(this.instance_prefix + sequence, ckconfig, obj.content);
-			$editor_area.data('cke_instance', insance);
-
-			insance.on('change', function(e){
-				if($contentField.length){
-					$contentField.val(e.editor.getData());
-				}
-			});
-			this.sequence = sequence;
-			window.editorRelKeys[sequence] = {};
-			window.editorRelKeys[sequence].primary   = $form.find('[name='+obj.primary_key+']')[0];
-			window.editorRelKeys[sequence].content   = $form.find('[name='+obj.content_key+']')[0];
-			window.editorRelKeys[sequence].func      = function(seq) {
-				return self.getContent.call(self, seq);
-			};
-			window.editorRelKeys[sequence].pasteHTML = function(text){
-				insance.insertHtml(text, 'html');
-			};
-		},
-		getContent : function(seq) {
-			var self = this;
-			var content = _getCkeInstance(seq).getData();
-			self.cast('GET_CONTENT', [content]);
-
-			return content;
-		},
-		API_ONREADY : function() {
-		},
-		API_GET_CONTENT: function() {
-		},
-		getInstance : function(name) {
-			return CKEDITOR.instances[name];
-		},
-		autosave: function(seq) {
-
-		}
-	});
-
-	App.registerPlugin(new xeCKEditor());
-})(jQuery);

modules/editor/editor.model.php

@@ -208,6 +208,7 @@ class editorModel extends editor
 		if(!$colorset) $colorset = 'moono';
 		Context::set('colorset', $colorset);
 		Context::set('skin', $skin);
+		Context::set('module_type', $option->module_type);
 
 		if($skin=='dreditor')
 		{
@@ -332,6 +333,7 @@ class editorModel extends editor
 		$editor_config = $this->getEditorConfig($module_srl);
 
 		$config = new stdClass();
+		$config->module_type = $type;
 
 		// Configurations listed according to a type
 		if($type == 'document')
@@ -374,6 +376,7 @@ class editorModel extends editor
 		}
 		// Pre-set option variables of editor
 		$option = new stdClass();
+		$option->module_type = $config->module_type;
 		$option->skin = $config->editor_skin;
 		$option->content_style = $config->content_style;
 		$option->content_font = $config->content_font;

modules/editor/skins/ckeditor/css/default.css

@@ -0,0 +1,6 @@
+.cke_button__xe_component_label {
+	display: inline !important;
+}
+.cke_button__xe_component_icon {
+	display: none !important;
+}

modules/editor/skins/ckeditor/editor.html

@@ -22,7 +22,7 @@
 	{@ $css_content .= chr(125);}
 <!--@endif-->
 
-<div id="ckeditor_instance_{$editor_sequence}"></div>
+<div id="ckeditor_instance_{$editor_sequence}" data-editor-sequence="{$editor_sequence}" data-editor-primary-key-name="{$editor_primary_key_name}" data-editor-content-key-name="{$editor_content_key_name}" style="min-height:{$editor_height}px;"></div>
 
 <!--%load_js_plugin("jquery.fileupload")-->
 <div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-container clearfix" data-editor-sequence="{$editor_sequence}">
@@ -58,37 +58,14 @@
 <script>
 (function($){
 	"use strict";
-	var editor_primary_key_name = '{$editor_primary_key_name}';
-	var editor_content_key_name = '{$editor_content_key_name}';
 
 	// editor
 	$(function(){
-		var pl = xe.getApp('xeEditorApp')[0].getPlugin('ckeditor')[0];
-		var editor_id = 'ckeditor_instance_{$editor_sequence}';
-
 		var ckconfig = {
 			height: '{$editor_height}',
-			bodyClass: 'xe_content editable',
-			toolbarCanCollapse: true,
-			toolbarGroups: [
-				{ name: 'clipboard',   groups: [ 'undo', 'clipboard' ] },
-				{ name: 'editing',     groups: [ 'find', 'selection' ] },
-				{ name: 'insert' },
-				{ name: 'tools' },
-				{ name: 'document',    groups: [ 'mode' ] },
-				'/',
-				{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-				{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
-				{ name: 'links' },
-				{ name: 'styles' },
-				{ name: 'colors' },
-				{ name: 'others' }
-			],
 			skin: '{$colorset}',
-			allowedContent: true,
 			contentsCss: '{$content_style_path}/editor.css',
-			removePlugins: 'stylescombo,language',
+			xe_editor_sequence: {$editor_sequence}
-			removeButtons: 'Save,Preview,Print,Cut,Copy,Paste'
 		};
 		<!--@if($enable_component)-->
 			ckconfig.extraPlugins = 'xe_component';
@@ -104,19 +81,19 @@
 
 		<!--@if(!$enable_default_component)-->
 			ckconfig.toolbar = [];
-			ckconfig.toolbarCanCollapse = true;
+			ckconfig.toolbarCanCollapse = false;
+		<!--@endif-->
+
+		<!--@if($module_type === 'comment')-->
+			ckconfig.toolbarStartupExpanded = false;
 		<!--@endif-->
 
 		<!--@if($css_content)-->CKEDITOR.addCss('{$css_content}');<!--@end-->
 
-		pl.editorInit("{$editor_sequence}", {
+		$('#ckeditor_instance_{$editor_sequence}').XeCkEditor({
-			'ckconfig' : ckconfig,
+			ckeconfig : ckconfig,
-			'content': jQuery('[name='+editor_content_key_name+']').val(),
+			content_field: jQuery('[name={$editor_content_key_name}]')
-			'primary_key': editor_primary_key_name,
-			'content_key': editor_content_key_name
 		});
-
-		var INS = pl.getInstance('{$editor_sequence}');
 	});
 
 	// uploader
@@ -131,6 +108,7 @@
 	<!--@endif-->
 })(jQuery);
 </script>
+
 <style>
 .clearfix:before, .clearfix:after {
     content: "";

modules/editor/tpl/js/editor.app.js

@@ -1,32 +1,112 @@
 (function($){
 	"use strict";
-	var XeEditorApp = xe.createApp('xeEditorApp', {
+	var settings = {
+		bodyClass: 'xe_content editable',
+		toolbarCanCollapse: true,
+		toolbarGroups: [
+			{ name: 'clipboard',   groups: [ 'undo', 'clipboard' ] },
+			{ name: 'editing',     groups: [ 'find', 'selection' ] },
+			{ name: 'insert' },
+			{ name: 'tools' },
+			{ name: 'document',    groups: [ 'mode' ] },
+			'/',
+			{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
+			{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
+			{ name: 'links' },
+			{ name: 'styles' },
+			{ name: 'colors' },
+			{ name: 'others' },
+		],
+		allowedContent: true,
+		removePlugins: 'stylescombo,language',
+		removeButtons: 'Save,Preview,Print,Cut,Copy,Paste',
+	};
+
+	var XeCkEditor = xe.createApp('XeCkEditor', {
+		editor_sequence: null,
 		init : function() {
+			var self = this;
+			CKEDITOR.on('instanceCreated', function(evt){
+				self.cast('CKEDITOR_CREATED');
+			});
+
+			CKEDITOR.on('ready', function(evt){
+				self.cast('CKEDITOR_READY');
+			});
+
+			CKEDITOR.on('instanceReady', function(evt){
+				self.cast('CKEDITOR_INSTANCE_READY');
+			});
+
+			CKEDITOR.on('instanceLoaded', function(evt){
+				self.cast('CKEDITOR_LOADED');
+			});
 		},
 		API_ONREADY : function() {
 		},
+		editorInit : function(containerEl, opts) {
+			var self = this;
+			var $containerEl = containerEl;
+			var $form     = $containerEl.closest('form');
+			var $contentField = opts.content_field;
+			var data = $containerEl.data();
+			var editor_sequence = $containerEl.data().editorSequence;
+			var ckeconfig = $.extend({}, settings, opts.ckeconfig || {});
+
+			this.editor_sequence = data.editorSequence;
+
+			$form.attr('editor_sequence', data.editorSequence);
+
+			var insance = CKEDITOR.appendTo($containerEl[0], ckeconfig, $contentField.val());
+			$containerEl.data('cke_instance', insance);
+
+			insance.on('change', function(e){
+				if($contentField.length){
+					$contentField.val(e.editor.getData());
+				}
+			});
+
+			window.editorRelKeys[data.editorSequence] = {};
+			window.editorRelKeys[data.editorSequence].primary   = $form.find('[name='+data.editorPrimaryKeyName+']')[0];
+			window.editorRelKeys[data.editorSequence].content   = $form.find('[name='+data.editorContentKeyName+']')[0];
+			window.editorRelKeys[data.editorSequence].func      = function(seq) {
+				return self.getContent.call(self, seq);
+			};
+			window.editorRelKeys[data.editorSequence].pasteHTML = function(text){
+				insance.insertHtml(text, 'html');
+			};
+		},
 		getContent : function(seq) {
-			this.cast('GET_CONTENT');
+			var self = this;
+			var content = _getCkeInstance(seq).getData();
+			self.cast('GET_CONTENT', [content]);
+
+			return content;
+		},
+		getInstance : function(name) {
+			return CKEDITOR.instances[name];
 		},
 		API_EDITOR_CREATED : function(){
 		},
 	});
 
 	// Shortcut function in jQuery
-	$.fn.xeEditorApp = function(opts) {
+	$.fn.XeCkEditor = function(opts) {
-		var u = new XeEditorApp(this.eq(0), opts);
+		var u = new XeCkEditor(this.eq(0), opts);
-		if(u) xe.registerApp(u);
+
+		if(u) {
+			xe.registerApp(u);
+			u.editorInit(this.eq(0), opts);
+		}
 
 		return u;
 	};
 
 	// Shortcut function in XE
-	window.xe.createXeEditor = function() {
+	window.xe.XeCkEditor = function() {
-		var u = new XeEditorApp();
+		var u = new XeCkEditor();
 
 		return u;
 	};
-	var u = new XeEditorApp();
-	xe.registerApp(u);
 
 })(jQuery);