Apply editor replacement to all .editable_preview elements

This commit is contained in:
Kijin Sung 2018-03-06 21:39:04 +09:00
parent 1728d17867
commit a0ae7a2a30
9 changed files with 63 additions and 75 deletions

View file

@ -107,6 +107,32 @@ a img {
}
}
/* Editable Preview */
.editable_preview {
width: 100%;
min-height: 240px;
max-height: 440px;
box-sizing: border-box;
margin: 0;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
overflow-y: auto;
cursor: text;
p {
margin-bottom: @default_paragraph_spacing !important;
}
}
.editable_preview_iframe {
width: 100%;
height: 440px;
box-sizing: border-box;
margin: 0 0 -4px 0;
padding: 0;
border: 0;
}
/* Message */
.message {
position: relative;

View file

@ -281,6 +281,25 @@ jQuery(function($) {
}
});
/* Editor preview replacement */
$(".editable_preview").addClass("xe_content").attr("tabindex", 0);
$(".editable_preview").on("click", function() {
var input = $(this).siblings(".editable_preview_content");
if (input.size()) {
$(this).off("click").off("focus").remove();
input = input.first();
if (input.attr("type") !== "hidden") {
input.hide();
}
var iframe = $('<iframe class="editable_preview_iframe"></iframe>');
iframe.attr("src", current_url.setQuery("module", "editor").setQuery("act", "dispEditorFrame").setQuery("parent_input_id", input.attr("id")).replace(/^https?:/, ''));
iframe.insertAfter(input);
}
});
$(".editable_preview").on("focus", function() {
$(this).triggerHandler("click");
});
/* select - option의 disabled=disabled 속성을 IE에서도 체크하기 위한 함수 */
if(navigator.userAgent.match(/MSIE/)) {
$('select').each(function(i, sels) {

View file

@ -22,6 +22,7 @@ class editorView extends editor
{
// Check parent input ID
$parent_input_id = Context::get('parent_input_id');
Context::set('parent_input_id', preg_replace('/[^a-z0-9_]/i', '', $parent_input_id));
Context::addBodyClass('disable_debug_panel');
// Load editor

View file

@ -1,22 +1,8 @@
<script>
$(function() {
var editor;
var parent = window.opener ? window.opener : window.parent;
var parent_input = $("#{$parent_input_id}", parent.document);
var parent_iframe = parent_input.siblings("iframe.editor_iframe");
CKEDITOR.on('instanceReady', function(evt) {
editor = evt.editor;
editor.setData(parent_input.val());
editor.on("resize", function(evt){
var height = evt.data.outerHeight;
parent_iframe.height(height);
});
editor.on("change", function() {
var content = editor.getData();
parent_input.val(content);
});
parent_iframe.height($(".cke_chrome").parent().height());
});
window.editor_copy_input = $("#{$parent_input_id}", parent.document);
window.editor_resize_iframe = window.editor_copy_input.siblings("iframe.editor_iframe");
});
</script>

View file

@ -145,6 +145,19 @@ function getAutoSavedSrl(ret_obj, response_tags, c) {
instance.on('instanceReady', function(e) {
$containerEl.css("min-height", 0);
if(window.editor_resize_iframe && window.editor_copy_input)
{
e.editor.setData(editor_copy_input.val());
e.editor.on("resize", function(e){
var height = e.data.outerHeight;
editor_resize_iframe.height(height);
});
e.editor.on("change", function() {
var content = e.editor.getData();
editor_copy_input.val(content);
});
editor_resize_iframe.height($(".cke_chrome").parent().height());
}
});
instance.on('paste', function(e) {

View file

@ -18,8 +18,8 @@
<div class="x_control-group">
<div class="x_control-label">{$lang->cmd_agreement_content}</div>
<div class="x_controls">
<input type="hidden" class="editor_content" name="agreement_{$i}_content" id="agreement_{$i}_content" value="{escape($config->agreements[$i]->content)}" />
<div class="editor_preview xe_content" tabindex="0">{$config->agreements[$i]->content}</div>
<input type="hidden" class="editable_preview_content" name="agreement_{$i}_content" id="agreement_{$i}_content" value="{escape($config->agreements[$i]->content)}" />
<div class="editable_preview">{$config->agreements[$i]->content}</div>
</div>
</div>
<div class="x_control-group">

View file

@ -1,26 +0,0 @@
.editor_preview {
width: 100%;
min-height: 240px;
max-height: 440px;
box-sizing: border-box;
margin: 0;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
overflow-y: auto;
cursor: text;
}
.editor_preview p {
margin-bottom: @default_paragraph_spacing !important;
}
.editor_iframe {
width: 100%;
height: 440px;
box-sizing: border-box;
margin: 0 0 -4px 0;
padding: 0;
border: 0;
}

View file

@ -1,5 +1,3 @@
<load target="css/config.less" />
<load target="js/config.js" />
<div class="x_page-header">
<h1>{$lang->cmd_member_config} <a class="x_icon-question-sign" href="./common/manual/admin/index.html#UMAN_member_config" target="_blank">{$lang->help}</a></h1>
</div>

View file

@ -1,29 +0,0 @@
(function($) {
// Editor replacement callback function
var editor_replace = function(input) {
var iframe = $('<iframe class="editor_iframe"></iframe>');
iframe.attr("src", current_url.setQuery("module", "editor").setQuery("act", "dispEditorFrame").setQuery("parent_input_id", input.attr("id")));
iframe.insertAfter(input);
input.siblings(".editor_preview").hide();
if (input.attr("type") !== "hidden") {
input.hide();
}
};
// Editor replacement
$(function() {
$(".editor_preview").on("click", function() {
var input = $(this).siblings(".editor_content");
if (input.size()) {
$(this).off("click").off("focus");
editor_replace(input.first());
}
});
$(".editor_preview").on("focus", function() {
$(this).triggerHandler("click");
});
});
})(jQuery);