Merge pull request #2324 from kijin/pr/ckeditor-paste-image

CKEditor에 붙여넣거나 드래그&드롭한 이미지 자동 업로드

common/js/plugins/ckeditor/ckeditor/plugins/rx_upload/plugin.js

@@ -0,0 +1,105 @@
+'use strict';
+
+/**
+ * Upload plugin for Rhymix
+ */
+CKEDITOR.plugins.add('rx_upload', {
+
+	init: function(editor) {
+
+		/**
+		 * Prevent the clipboard plugin from interfering with us.
+		 */
+		editor.plugins.clipboard._supportedFileMatchers.unshift(function() { return true; });
+		if (editor.config.clipboard_handleImages) {
+			editor.config.clipboard_handleImages = false;
+		}
+
+		/**
+		 * The main event handler for paste and drop.
+		 */
+		editor.on('paste', function(event) {
+
+			// Check if the pasted data contains any files.
+			const method = event.data.method;
+			const dataTransfer = event.data.dataTransfer;
+			const files_count = dataTransfer.getFilesCount();
+			if (!files_count) {
+				return;
+			}
+
+			// Prevent the default plugin from touching these files.
+			event.stop();
+
+			// Read and upload each file.
+			for (let i = 0; i < files_count; i++) {
+				uploadFile(dataTransfer.getFile(i));
+			}
+		});
+
+		/**
+		 * Upload function.
+		 */
+		const uploadFile = function(file) {
+
+			// Get the editor sequence.
+			const editor_container = $(editor.container.$).closest('.rx_ckeditor');
+			const upload_container = editor_container.nextAll('.xefu-container').first();
+			const editor_sequence = editor_container.data('editorSequence');
+
+			// Generate the form data.
+			const form = new FormData();
+			form.append('mid', window.editor_mid ? window.editor_mid : window.current_mid);
+			form.append('act', 'procFileUpload');
+			form.append('editor_sequence', editor_sequence);
+			form.append('Filedata', file);
+
+			// Upload!
+			$.ajax({
+				url: window.request_uri,
+				type: 'POST',
+				contentType: false,
+				processData: false,
+				cache: false,
+				data: form,
+				dataType: 'json',
+				success: function(data) {
+					if (data.error == 0) {
+						insertFile(upload_container, data);
+						reloadFileList(upload_container, data);
+					} else {
+						displayError(8, data.message);
+					}
+				},
+				error: function(jqXHR) {
+					displayError(9, jqXHR.responseText);
+				}
+			});
+		};
+
+		/**
+		 * Insert file into editor.
+		 */
+		const insertFile = function(container, data) {
+			const html = container.data('instance').generateHtml(container, data);
+			editor.insertHtml(html, 'unfiltered_html');
+		};
+
+		/**
+		 * Reload the file list.
+		 */
+		const reloadFileList = function(container, data) {
+			container.data('editorStatus', data);
+			container.data('instance').loadFilelist(container, true);
+		};
+
+		/**
+		 * Display an error message.
+		 */
+		const displayError = function(type, message) {
+			alert(window.xe.msg_file_upload_error + ' (Type ' + type + ")\n" + message);
+		};
+
+	}
+
+});

common/js/plugins/jquery.fileupload/js/main.js

@@ -174,36 +174,24 @@
 					}
 
 					if(result.error == 0) {
-						if(/\.(gif|jpe?g|png|webp)$/i.test(result.source_filename) && opt.autoinsertTypes.image) {
+						var filename = String(result.source_filename);
-							temp_code += '<img src="' + result.download_url + '" alt="' + result.source_filename + '" editor_component="image_link" data-file-srl="' + result.file_srl + '" />';
+						if (filename.match(/\.(gif|jpe?g|png|webp)$/i) && opt.autoinsertTypes.image) {
+							temp_code = self.generateHtml($container, result);
 						}
-						else if(/\.(mp3|wav|ogg|flac|aac)$/i.test(result.source_filename) && opt.autoinsertTypes.audio) {
+						else if (filename.match(/\.(mp3|wav|ogg|flac|aac)$/i) && opt.autoinsertTypes.audio) {
-							temp_code += '<audio src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
+							temp_code = self.generateHtml($container, result);
-						}
-						else if(/\.(mp4|webm|ogv)$/i.test(result.source_filename) && opt.autoinsertTypes.video) {
-							if(result.original_type === 'image/gif') {
-								temp_code += '<video src="' + result.download_url + '" autoplay loop muted playsinline data-file-srl="' + result.file_srl + '" />';
-							} else if (result.download_url.match(/\b(?:procFileDownload\b|files\/download\/)/)) {
-								if (!result.download_url.match(/^\//)) {
-									result.download_url = XE.URI(default_url).pathname() + result.download_url;
-								}
-								temp_code += '<video src="' + result.download_url + '" controls preload="none" data-file-srl="' + result.file_srl + '" />';
-							} else {
-								temp_code += '<video src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
-							}
-							if(result.thumbnail_filename) {
-								temp_code = temp_code.replace('controls', 'poster="' + result.thumbnail_filename.replace(/^.\//, XE.URI(default_url).pathname()) + '" controls');
 						}
+						else if (filename.match(/\.(mp4|webm|ogv)$/i) && opt.autoinsertTypes.video) {
+							temp_code = self.generateHtml($container, result);
 						}
 
 						if(temp_code !== '') {
-							if (opt.autoinsertPosition === 'paragraph') {
-								temp_code = "<p>" + temp_code + "</p>\n";
-							}
 							try {
 								_getCkeInstance(settings.formData.editor_sequence).insertHtml(temp_code, "unfiltered_html");
 							}
-							catch(err) {}
+							catch(err) {
+								// pass
+							}
 						}
 						if (typeof result.files !== 'undefined') {
 							$container.data('editorStatus', result);
@@ -353,51 +341,63 @@
 		unselectImageFiles: function() {},
 		unselectNonImageFiles: function() {},
 
+		generateHtml: function($container, file) {
+			var filename = String(file.source_filename);
+			var html = '';
+			var data = $container.data();
+
+			if (filename.match(/\.(gif|jpe?g|png|webp)$/i)) {
+				html = '<img src="' + file.download_url + '" alt="' + file.source_filename + '"'
+					+ ' editor_component="image_link" data-file-srl="' + file.file_srl + '" />';
+			}
+			else if (filename.match(/\.(mp3|wav|ogg|flac|aac)$/i)) {
+				html = '<audio src="' + file.download_url + '" controls' +
+					' data-file-srl="' + file.file_srl + '" />';
+			}
+			else if (filename.match(/\.(mp4|webm|ogv)$/i)) {
+				if (file.original_type === 'image/gif') {
+					html = '<video src="' + file.download_url + '"'
+						+ ' autoplay loop muted playsinline data-file-srl="' + file.file_srl + '" />';
+				} else if (file.download_url.match(/\b(?:procFileDownload\b|files\/download\/)/)) {
+					if (!file.download_url.match(/^\//)) {
+						file.download_url = XE.URI(default_url).pathname() + file.download_url;
+					}
+					html = '<video src="' + file.download_url + '" controls preload="none"'
+						+ ' data-file-srl="' + file.file_srl + '" />';
+				} else {
+					html = '<video src="' + file.download_url + '" controls data-file-srl="' + file.file_srl + '" />';
+				}
+				if (file.thumbnail_filename) {
+					html = html.replace('controls', 'poster="' + file.thumbnail_filename.replace(/^.\//, XE.URI(default_url).pathname()) + '" controls');
+				}
+			}
+
+			if (html !== '' && data.settings.autoinsertPosition === 'paragraph') {
+					html = '<p>' + html + '</p>\n';
+			}
+
+			if (html === '') {
+				html += '<a href="' + file.download_url + '" data-file-srl="' + file.file_srl + '">' + file.source_filename + '</a>\n';
+			}
+
+			return html;
+		},
+
 		insertToContent: function($container) {
 			var self = this;
 			var data = $container.data();
-
 			$.each(data.selected_files, function(idx, file) {
 				var file_srl = $(file).data().fileSrl;
 				var result = data.files[file_srl];
-				if(!result) return;
+				if (result) {
-				var temp_code = '';
+					var html = self.generateHtml($container, result);
-
-				if(/\.(gif|jpe?g|png|webp)$/i.test(result.source_filename)) {
-					temp_code += '<img src="' + result.download_url + '" alt="' + result.source_filename + '" editor_component="image_link" data-file-srl="' + result.file_srl + '" />';
-				}
-				else if(/\.(mp3|wav|ogg|flac|aac)$/i.test(result.source_filename)) {
-					temp_code += '<audio src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
-				}
-				else if(/\.(mp4|webm|ogv)$/i.test(result.source_filename)) {
-					if(result.original_type === 'image/gif') {
-						temp_code += '<video src="' + result.download_url + '" autoplay loop muted playsinline data-file-srl="' + result.file_srl + '" />';
-					} else if (result.download_url.match(/\b(?:procFileDownload\b|files\/download\/)/)) {
-						if (!result.download_url.match(/^\//)) {
-							result.download_url = XE.URI(default_url).pathname() + result.download_url;
-						}
-						temp_code += '<video src="' + result.download_url + '" controls preload="none" data-file-srl="' + result.file_srl + '" />';
-					} else {
-						temp_code += '<video src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
-					}
-					if(result.thumbnail_filename) {
-						temp_code = temp_code.replace('controls', 'poster="' + result.thumbnail_filename.replace(/^.\//, XE.URI(default_url).pathname()) + '" controls');
-					}
-				}
-
-				if(temp_code !== '') {
-					if (data.settings.autoinsertPosition === 'paragraph') {
-						temp_code = "<p>" + temp_code + "</p>\n";
-					}
-				}
-				if(temp_code === '') {
-					temp_code += '<a href="' + result.download_url + '" data-file-srl="' + result.file_srl + '">' + result.source_filename + "</a>\n";
-				}
 					try {
-					_getCkeInstance(data.editorSequence).insertHtml(temp_code, "unfiltered_html");
+						_getCkeInstance(data.editorSequence).insertHtml(html, 'unfiltered_html');
+					}
+					catch(err) {
+						// pass
+					}
 				}
-				catch(err) {}
-
 			});
 		},
 		/**

modules/editor/skins/ckeditor/editor.html

@@ -128,15 +128,13 @@
 	            fontSize_sizes: font_sizes,
 				toolbarCanCollapse: true,
 				allowedContent: true,
-				clipboard_handleImages: false,
 				startupFocus: {json_encode($editor_focus)},
 				language: "{str_replace('jp','ja',$lang_type)}",
 				iframe_attributes: {},
 				versionCheck: false
 			},
 			loadXeComponent: true,
-			enableToolbar: true,
+			enableToolbar: true
-			content_field: jQuery('[name={$editor_content_key_name}]')
 		};
 
 		// Add style-sheet for the WYSIWYG
@@ -177,6 +175,7 @@
 		settings.ckeconfig.toolbarStartupExpanded = {$editor_toolbar_hide ? 'false' : 'true'};
 
 		// Add or remove plugins based on Rhymix configuration.
+		{@ $editor_additional_plugins[] = 'rx_upload'}
 		<!--@if($editor_additional_plugins)-->
 			settings.ckeconfig.extraPlugins = {json_encode(implode(',', $editor_additional_plugins))};
 		<!--@endif-->
@@ -219,15 +218,15 @@
 		var ckeApp = $('#ckeditor_instance_{$editor_sequence}').XeCkEditor(settings);
 
 		// Add use_editor and use_html fields to parent form.
-		var parentform = $('#ckeditor_instance_{$editor_sequence}').parents('form');
+		var parentform = $('#ckeditor_instance_{$editor_sequence}').closest('form');
 		var use_editor = parentform.find("input[name='use_editor']");
 		var use_html = parentform.find("input[name='use_html']");
-		if (use_editor.size()) {
+		if (use_editor.length) {
 			use_editor.val("Y");
 		} else {
 			parentform.append('<input type="hidden" name="use_editor" value="Y" />');
 		}
-		if (use_html.size()) {
+		if (use_html.length) {
 			use_html.val("Y");
 		} else {
 			parentform.append('<input type="hidden" name="use_html" value="Y" />');

modules/editor/skins/ckeditor/file_upload.html

@@ -1,10 +1,17 @@
+<config autoescape="on" />
+<load target="./lang" />
+
 <!--%load_js_plugin("jquery.fileupload")-->
 <!--%load_js_plugin("jquery.finderSelect")-->
 <!--%load_js_plugin("handlebars")-->
-<load target="./lang" />
+
 <div cond="$allow_fileupload" id="xefu-container-{$editor_sequence}" class="xefu-container xe-clearfix"
 	data-editor-sequence="{$editor_sequence}"
-	data-editor-status="{escape(json_encode(FileModel::getInstance()->getFileList($editor_sequence)))}">
+	data-editor-status="{json_encode(FileModel::getInstance()->getFileList($editor_sequence), JSON_UNESCAPED_UNICODE)}"
+	data-max-file-size="{$logged_info->is_admin === 'Y' ? 0 : $file_config->allowed_filesize}"
+	data-max-chunk-size="{$file_config->allowed_chunk_size ?: 0}"
+	data-autoinsert-types="{json_encode($editor_autoinsert_types)}"
+	data-autoinsert-position="{$editor_autoinsert_position ?: 'paragraph'}">
 
 	<!--// dropzone -->
 	<div class="xefu-dropzone">
@@ -29,10 +36,9 @@
 		<div style="float: left;">
 			{$lang->ckeditor_file_count} (<span class="attached_size"></span> / <span class="allowed_attach_size"></span>)
 		</div>
-
 		<div style="float: right">
-			<input type="button" class="xefu-btn xefu-act-link-selected" style=" vertical-align: middle; vertical-align: middle;" value="{$lang->edit->link_file}">
+			<input type="button" class="xefu-btn xefu-act-link-selected" style="vertical-align: middle" value="{$lang->edit->link_file}">
-			<input type="button" class="xefu-btn xefu-act-delete-selected" style=" vertical-align: middle; vertical-align: middle;" value="{$lang->edit->delete_selected}">
+			<input type="button" class="xefu-btn xefu-act-delete-selected" style="vertical-align: middle" value="{$lang->edit->delete_selected}">
 		</div>
 	</div>
 
@@ -41,7 +47,6 @@
 			<ul>
 			</ul>
 		</div>
-
 		<div class="xefu-list-files">
 			<ul>
 			</ul>
@@ -51,24 +56,18 @@
 </div>
 
 <script>
-	function reloadUploader(editor_sequence){
+
-<!--@if($allow_fileupload)-->
-		$container = jQuery('#xefu-container-' + editor_sequence);
-		$container.data('instance').loadFilelist($container);
-<!--@endif-->
-	}
-<!--@if($allow_fileupload)-->
 	jQuery(function($){
-		// uploader
+		var container = $('#xefu-container-{$editor_sequence}');
-		var setting = {
+		if (container.length) {
-			maxFileSize: {$logged_info->is_admin === 'Y' ? 0 : $file_config->allowed_filesize},
+			container.data('instance', container.xeUploader({
-			maxChunkSize: {$file_config->allowed_chunk_size ?: 0},
+				maxFileSize: parseInt(container.data('maxFileSize'), 10),
-			autoinsertTypes: {json_encode($editor_autoinsert_types)},
+				maxChunkSize: parseInt(container.data('maxChunkSize'), 10),
-			autoinsertPosition: {json_encode($editor_autoinsert_position ?: 'paragraph')},
+				autoinsertTypes: container.data('autoinsertTypes'),
+				autoinsertPosition: container.data('autoinsertPosition'),
 				singleFileUploads: true
-		};
+			}));
-		$container = $('#xefu-container-{$editor_sequence}');
+		}
-		$container.data('instance',$container.xeUploader(setting));
 		window.xe.msg_exceeds_limit_size = '{$lang->msg_exceeds_limit_size}';
 		window.xe.msg_checked_file_is_deleted = '{$lang->msg_checked_file_is_deleted}';
 		window.xe.msg_file_cart_is_null = '{$lang->msg_file_cart_is_null}';
@@ -76,5 +75,12 @@
 		window.xe.msg_not_allowed_filetype = '{$lang->msg_not_allowed_filetype}';
 		window.xe.msg_file_upload_error = '{$lang->msg_file_upload_error}';
 	});
-<!--@endif-->
+
+	function reloadUploader(editor_sequence) {
+		var container = $('#xefu-container-' + editor_sequence);
+		if (container.length) {
+			container.data('instance').loadFilelist(container);
+		}
+	}
+
 </script>

modules/editor/skins/simpleeditor/js/simpleeditor.js

@@ -70,12 +70,12 @@
 
 			// Load editor info.
 			var editor = $(this);
-			var editor_sequence = editor.data('editor-sequence');
+			var editor_sequence = editor.data('editorSequence');
-			var content_key = editor.data('editor-content-key-name');
+			var content_key = editor.data('editorContentKeyName');
-			var primary_key = editor.data('editor-primary-key-name');
+			var primary_key = editor.data('editorPrimaryKeyName');
 			var insert_form = editor.closest('form');
 			var content_input = insert_form.find('input,textarea').filter('[name=' + content_key + ']');
-			var editor_height = editor.data('editor-height');
+			var editor_height = editor.data('editorHeight');
 			if (editor_height) {
 				editor.css('height', editor_height + 'px');
 			}

modules/editor/skins/textarea/js/textarea.js

@@ -1,7 +1,7 @@
 function editorTextarea(editor_sequence) {
 	var textarea = jQuery("#textarea_instance_" + editor_sequence);
-	var content_key = textarea.data("editor-content-key-name");
+	var content_key = textarea.data("editorContentKeyName");
-	var primary_key = textarea.data("editor-primary-key-name");
+	var primary_key = textarea.data("editorPrimaryKeyName");
 	var insert_form = textarea.closest("form");
 	var content_input = insert_form.find("input[name='" + content_key + "']");
 	var content = "";

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

@@ -1,12 +1,10 @@
 function getCkFormInstance(editor_sequence)
 {
-	var fo_obj = document.getElementById('ckeditor_instance_' + editor_sequence).parentNode;
+	var form = $('#ckeditor_instance_' + editor_sequence).closest('form');
-	while(fo_obj.nodeName != 'FORM') { fo_obj = fo_obj.parentNode; }
+	return form.length ? form[0] : null;
-	if(fo_obj.nodeName == 'FORM') return fo_obj;
-	return;
 }
 
-function getAutoSavedSrl(ret_obj, response_tags, c) {
+function getAutoSavedSrl(ret_obj) {
 	var editor_sequence = ret_obj.editor_sequence;
 	var primary_key = ret_obj.key;
 	var fo_obj = getCkFormInstance(editor_sequence);
@@ -76,19 +74,21 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
 		editorInit : function(containerEl, opts) {
 			var self = this;
 			var $containerEl = containerEl;
-			var $form     = $containerEl.closest('form');
+			var form = $containerEl.closest('form');
-			var $contentField = $form.find(opts.content_field);
 			var data = $containerEl.data();
-			var editor_sequence = $containerEl.data().editorSequence;
+			var editor_sequence = data.editorSequence;
-			var primary_key = $containerEl.data().editorPrimaryKeyName;
+			var primary_key = data.editorPrimaryKeyName;
+			var primary_input = form.find("[name='" + primary_key + "']");
+			var content_key = data.editorContentKeyName;
+			var content_input = form.find("[name='" + content_key + "']");
 			var fo_obj = getCkFormInstance(editor_sequence);
 
 			this.ckeconfig = $.extend({}, default_ckeconfig, opts.ckeconfig || {});
 			this.ckeconfig.bodyClass = this.ckeconfig.bodyClass + ' color_scheme_' + getColorScheme() +
 				($('body').hasClass('cke_auto_dark_mode') ? ' cke_auto_dark_mode' : '');
 
-			this.editor_sequence = data.editorSequence;
+			this.editor_sequence = editor_sequence;
-			$form.attr('editor_sequence', data.editorSequence);
+			form.attr('editor_sequence', editor_sequence);
 
 			if(CKEDITOR.env.mobile) CKEDITOR.env.isCompatible = true;
 
@@ -99,23 +99,23 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
 
 				if(saved_title || saved_content) {
 					// 자동저장된 문서 활용여부를 물은 후 사용하지 않는다면 자동저장된 문서 삭제
-					if(confirm(fo_obj._saved_doc_message.value)) {
+					if (confirm(fo_obj._saved_doc_message.value)) {
-						if(typeof(fo_obj.title)!='undefined') fo_obj.title.value = saved_title;
+						if(typeof(fo_obj.title) !== 'undefined') {
-						$contentField.val(saved_content);
+							fo_obj.title.value = saved_title;
-		
+						}
-						var param = [];
+						content_input.val(saved_content);
-						param.editor_sequence = editor_sequence;
+						exec_json('editor.procEditorLoadSavedDocument', {
-						param.primary_key = primary_key;
+							editor_sequence: editor_sequence,
-						param.mid = current_mid;
+							primary_key: primary_key,
-						var response_tags = new Array("error","message","editor_sequence","key","title","content","document_srl");
+							mid: current_mid
-						exec_xml('editor',"procEditorLoadSavedDocument", param, getAutoSavedSrl, response_tags);
+						}, getAutoSavedSrl);
 					} else {
 						editorRemoveSavedDoc();
 					}
 				}
 			}
 
-			var instance = CKEDITOR.appendTo($containerEl[0], {}, $contentField.val());
+			var instance = CKEDITOR.appendTo($containerEl[0], {}, content_input.val());
 
 			instance.on('customConfigLoaded', function(e) {
 				instance.config = $.extend({}, e.editor.config, self.ckeconfig);
@@ -173,8 +173,8 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
 			$containerEl.data('cke_instance', instance);
 
 			window.editorRelKeys[data.editorSequence] = {};
-			window.editorRelKeys[data.editorSequence].primary   = $form.find('[name='+data.editorPrimaryKeyName+']')[0];
+			window.editorRelKeys[data.editorSequence].primary = primary_input[0];
-			window.editorRelKeys[data.editorSequence].content   = $form.find('[name='+data.editorContentKeyName+']')[0];
+			window.editorRelKeys[data.editorSequence].content = content_input[0];
 			window.editorRelKeys[data.editorSequence].func = function(seq) {
 				return self.getContent.call(self, seq);
 			};
@@ -183,7 +183,9 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
 			};
 
 			// 자동저장 필드가 있다면 자동 저장 기능 활성화
-			if(typeof(fo_obj._saved_doc_title)!="undefined" ) editorEnableAutoSave(fo_obj, editor_sequence);
+			if (typeof(fo_obj._saved_doc_title) !== 'undefined') {
+				editorEnableAutoSave(fo_obj, editor_sequence);
+			}
 		},
 		getContent : function(seq) {
 			var self = this;