#1087 에디터 스킨 추가

common/js/plugins/ckeditor/ckeditor/plugins/xe_component/plugin.js

@@ -1,3 +1,7 @@
+/*
+ * @author Arnia <dev@karybu.org>
+ * @modifier XpressEngine <developers@xpressengine.com>
+ */
 CKEDITOR.plugins.add('xe_component', {
 	requires: 'richcombo',
 	icons: 'xe_component',
@@ -22,7 +26,7 @@ CKEDITOR.plugins.add('xe_component', {
 		});
 
 		editor.ui.addRichCombo('Xe_component', {
-			label: '확장기능',
+			label: '확장기능', // @TODO: lang
 			title: 'Extension Components',
 			panel: {
 				css: [CKEDITOR.skin.getPath('editor')].concat(config.contentsCss),

modules/editor/skins/ckeditor/editor.html

@@ -0,0 +1,88 @@
+<!-- css -->
+<load target="css/default.css" />
+
+<!-- JS -->
+<!--%load_js_plugin("ckeditor")-->
+<load target="js/xe_interface.js" />
+<load target="../../tpl/js/editor.app.js" />
+<load target="../../tpl/js/editor_common.js" />
+
+{@ $css_content = null }
+<!--@if($content_font || $content_font_size)-->
+	{@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); }
+
+	{@ $css_content .= ' .xe_content.editable { '}
+	<block cond="$content_font">
+	{@ $css_content .= 'font-family:' . $content_font . ';';}
+	</block>
+
+	<block cond="$content_font_size">
+	{@ $css_content .= 'font-size:' . $content_font_size . ';';}
+	</block>
+	{@ $css_content .= chr(125);}
+<!--@endif-->
+
+<div id="ckeditor_instance_{$editor_sequence}"></div>
+
+<script>
+(function($){
+	var editor_primary_key_name = '{$editor_primary_key_name}';
+	var editor_content_key_name = '{$editor_content_key_name}';
+
+	$(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',
+			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',
+			removeButtons: 'Save,Preview,Print,Cut,Copy,Paste',
+		};
+		<!--@if($enable_component)-->
+			ckconfig.extraPlugins = 'xe_component';
+
+			{@ $xe_component = array(); }
+			<!--@foreach($component_list as $component_name => $component)-->
+				{@ $xe_component[] = $component_name . ":'" . $component->title . "'"; }
+			<!--@endforeach-->
+			{@ $xe_component = implode(',', $xe_component); }
+
+			ckconfig.xe_component_arrays = {{$xe_component}};
+		<!--@endif-->
+
+		<!--@if(!$enable_default_component)-->
+			ckconfig.toolbar = [];
+			ckconfig.toolbarCanCollapse = true;
+		<!--@endif-->
+
+		<!--@if($css_content)-->CKEDITOR.addCss('{$css_content}');<!--@end-->
+
+		pl.editorInit("{$editor_sequence}", {
+			'ckconfig' : ckconfig,
+			'content': jQuery('[name='+editor_content_key_name+']').val(),
+			'primary_key': editor_primary_key_name,
+			'content_key': editor_content_key_name,
+		});
+
+		var INS = pl.getInstance('{$editor_sequence}');
+	});
+})(jQuery);
+</script>

modules/editor/skins/ckeditor/js/xe_interface.js

@@ -0,0 +1,44 @@
+function _getCkeInstance(editor_sequence) {
+	var $editor_area = jQuery("#ckeditor_instance_"+editor_sequence);
+	return $editor_area.data('cke_instance');
+}
+
+//Get content from editor
+function editorGetContentTextarea_xe(editor_sequence) {
+	return _getCkeInstance(editor_sequence).getText();
+}
+
+
+function editorGetSelectedHtml(editor_sequence) {
+	return _getCkeInstance(editor_sequence).getSelection().getSelectedText();
+}
+
+function editorGetContent(editor_sequence) {
+	return _getCkeInstance(editor_sequence).getData();
+}
+
+//Replace html content to editor
+function editorReplaceHTML(iframe_obj, content) {
+	content = editorReplacePath(content);
+
+	var editor_sequence = parseInt(iframe_obj.id.replace(/^.*_/, ''), 10);
+
+	_getCkeInstance(editor_sequence).insertHtml(content, "unfiltered_html");
+}
+
+function editorGetIFrame(editor_sequence) {
+	return jQuery('#ckeditor_instance_' + editor_sequence).get(0);
+}
+
+
+function editorReplacePath(content) {
+	// 태그 내 src, href, url의 XE 상대경로를 http로 시작하는 full path로 변경
+	content = content.replace(/\<([^\>\<]*)(src=|href=|url\()("|\')*([^"\'\)]+)("|\'|\))*(\s|>)*/ig, function(m0,m1,m2,m3,m4,m5,m6) {
+		if(m2=="url(") { m3=''; m5=')'; } else { if(typeof(m3)=='undefined') m3 = '"'; if(typeof(m5)=='undefined') m5 = '"'; if(typeof(m6)=='undefined') m6 = ''; }
+		var val = jQuery.trim(m4).replace(/^\.\//,'');
+		if(/^(http\:|https\:|ftp\:|telnet\:|mms\:|mailto\:|\/|\.\.|\#)/i.test(val)) return m0;
+		return '<'+m1+m2+m3+request_uri+val+m5+m6;
+	});
+
+	return content;
+}

modules/editor/skins/ckeditor/skin.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<skin version="0.1">
+    <title xml:lang="ko">CKEditor 스킨</title>
+    <description xml:lang="ko">CKEditor</description>
+    <version>1.0.0</version>
+    <date>2015-02-24</date>
+
+    <author email_address="developers@xpressengine.com" link="https://www.xpressengine.com">
+        <name xml:lang="ko">NAVER</name>
+    </author>
+
+    <colorset>
+        <color name="moono">
+            <title xml:lang="ko">Moono</title>
+        </color>
+        <color name="moono-dark">
+            <title xml:lang="ko">Moono Dark</title>
+        </color>
+    </colorset>
+</skin>