fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-03 16:51:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
CKEditor에 붙여넣거나 드래그&드롭한 이미지 자동 업로드
This commit is contained in:
Kijin Sung 2024-04-28 22:13:50 +09:00 • committed by GitHub
commit f83891bac5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 241 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

105
common/js/plugins/ckeditor/ckeditor/plugins/rx_upload/plugin.js Normal file
View file

@ -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);
};
}
});

116
common/js/plugins/jquery.fileupload/js/main.js
View file

@ -174,36 +174,24 @@
}
if(result.error == 0) {
if(/\.(gif|jpe?g|png|webp)$/i.test(result.source_filename) && opt.autoinsertTypes.image) {
temp_code += '<img src="' + result.download_url + '" alt="' + result.source_filename + '" editor_component="image_link" data-file-srl="' + result.file_srl + '" />';
var filename = String(result.source_filename);
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) {
temp_code += '<audio src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" />';
else if (filename.match(/\.(mp3|wav|ogg|flac|aac)$/i) && opt.autoinsertTypes.audio) {
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;
var temp_code = '';
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) {
var html = self.generateHtml($container, result);
try {
_getCkeInstance(data.editorSequence).insertHtml(html, 'unfiltered_html');
}
if(result.thumbnail_filename) {
temp_code = temp_code.replace('controls', 'poster="' + result.thumbnail_filename.replace(/^.\//, XE.URI(default_url).pathname()) + '" controls');
catch(err) {
// pass
}
}
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");
}
catch(err) {}
});
},
/**

11
modules/editor/skins/ckeditor/editor.html
View file

@ -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,
content_field: jQuery('[name={$editor_content_key_name}]')
enableToolbar: true
};
// 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" />');

54
modules/editor/skins/ckeditor/file_upload.html
View file

@ -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-delete-selected" style=" vertical-align: middle; vertical-align: middle;" value="{$lang->edit->delete_selected}">
<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" 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 setting = {
maxFileSize: {$logged_info->is_admin === 'Y' ? 0 : $file_config->allowed_filesize},
maxChunkSize: {$file_config->allowed_chunk_size ?: 0},
autoinsertTypes: {json_encode($editor_autoinsert_types)},
autoinsertPosition: {json_encode($editor_autoinsert_position ?: 'paragraph')},
singleFileUploads: true
};
$container = $('#xefu-container-{$editor_sequence}');
$container.data('instance',$container.xeUploader(setting));
var container = $('#xefu-container-{$editor_sequence}');
if (container.length) {
container.data('instance', container.xeUploader({
maxFileSize: parseInt(container.data('maxFileSize'), 10),
maxChunkSize: parseInt(container.data('maxChunkSize'), 10),
autoinsertTypes: container.data('autoinsertTypes'),
autoinsertPosition: container.data('autoinsertPosition'),
singleFileUploads: true
}));
}
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>

8
modules/editor/skins/simpleeditor/js/simpleeditor.js
View file

@ -70,12 +70,12 @@
// Load editor info.
var editor = $(this);
var editor_sequence = editor.data('editor-sequence');
var content_key = editor.data('editor-content-key-name');
var primary_key = editor.data('editor-primary-key-name');
var editor_sequence = editor.data('editorSequence');
var content_key = editor.data('editorContentKeyName');
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');
}

14
modules/editor/skins/textarea/js/textarea.js
View file

@ -1,27 +1,27 @@
function editorTextarea(editor_sequence) {
var textarea = jQuery("#textarea_instance_" + editor_sequence);
var content_key = textarea.data("editor-content-key-name");
var primary_key = textarea.data("editor-primary-key-name");
var content_key = textarea.data("editorContentKeyName");
var primary_key = textarea.data("editorPrimaryKeyName");
var insert_form = textarea.closest("form");
var content_input = insert_form.find("input[name='" + content_key + "']");
var content = "";
// Set editor keys
editorRelKeys[editor_sequence] = {};
editorRelKeys[editor_sequence].primary = insert_form.find("input[name='" + primary_key + "']");
editorRelKeys[editor_sequence].content = content_input;
editorRelKeys[editor_sequence].func = editorGetContent;
// Set editor_sequence
insert_form[0].setAttribute('editor_sequence', editor_sequence);
// Load existing content
if (content_input.size()) {
content = String(content_input.val()).stripTags();
content_input.val(content);
textarea.val(content.unescape());
}
// Save edited content
textarea.on("change", function() {
content_input.val(String(jQuery(this).val()).escape());
@ -41,4 +41,4 @@ function editorTextarea(editor_sequence) {
});
editor_resize_iframe.height(textarea.height());
}
}
}

62
modules/editor/tpl/js/editor.app.js
View file

@ -1,16 +1,14 @@
function getCkFormInstance(editor_sequence)
{
var fo_obj = document.getElementById('ckeditor_instance_' + editor_sequence).parentNode;
while(fo_obj.nodeName != 'FORM') { fo_obj = fo_obj.parentNode; }
if(fo_obj.nodeName == 'FORM') return fo_obj;
return;
var form = $('#ckeditor_instance_' + editor_sequence).closest('form');
return form.length ? form[0] : null;
}
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);
if(ret_obj.document_srl !== 0)
{
fo_obj[primary_key].value = ret_obj.document_srl;
@ -76,46 +74,48 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
editorInit : function(containerEl, opts) {
var self = this;
var $containerEl = containerEl;
var $form = $containerEl.closest('form');
var $contentField = $form.find(opts.content_field);
var form = $containerEl.closest('form');
var data = $containerEl.data();
var editor_sequence = $containerEl.data().editorSequence;
var primary_key = $containerEl.data().editorPrimaryKeyName;
var editor_sequence = data.editorSequence;
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;
$form.attr('editor_sequence', data.editorSequence);
this.editor_sequence = editor_sequence;
form.attr('editor_sequence', editor_sequence);
if(CKEDITOR.env.mobile) CKEDITOR.env.isCompatible = true;
// saved document(자동저장 문서)에 대한 확인
if(typeof(fo_obj._saved_doc_title)!= "undefined") { ///<< _saved_doc_title field가 없으면 자동저장 하지 않음
var saved_title = fo_obj._saved_doc_title.value;
var saved_content = fo_obj._saved_doc_content.value;
if(saved_title || saved_content) {
// 자동저장된 문서 활용여부를 물은 후 사용하지 않는다면 자동저장된 문서 삭제
if(confirm(fo_obj._saved_doc_message.value)) {
if(typeof(fo_obj.title)!='undefined') fo_obj.title.value = saved_title;
$contentField.val(saved_content);
var param = [];
param.editor_sequence = editor_sequence;
param.primary_key = primary_key;
param.mid = current_mid;
var response_tags = new Array("error","message","editor_sequence","key","title","content","document_srl");
exec_xml('editor',"procEditorLoadSavedDocument", param, getAutoSavedSrl, response_tags);
if (confirm(fo_obj._saved_doc_message.value)) {
if(typeof(fo_obj.title) !== 'undefined') {
fo_obj.title.value = saved_title;
}
content_input.val(saved_content);
exec_json('editor.procEditorLoadSavedDocument', {
editor_sequence: editor_sequence,
primary_key: primary_key,
mid: current_mid
}, 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,17 +173,19 @@ 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].content = $form.find('[name='+data.editorContentKeyName+']')[0];
window.editorRelKeys[data.editorSequence].func = function(seq) {
window.editorRelKeys[data.editorSequence].primary = primary_input[0];
window.editorRelKeys[data.editorSequence].content = content_input[0];
window.editorRelKeys[data.editorSequence].func = function(seq) {
return self.getContent.call(self, seq);
};
window.editorRelKeys[data.editorSequence].pasteHTML = function(text){
instance.insertHtml(text, 'html');
};
// 자동저장 필드가 있다면 자동 저장 기능 활성화
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;