Merge pull request #1010 from kijin/pr/editor-frame

약관 편집 화면에서 쓰던 에디터 변환 기능을 다른 곳에서도 쓸 수 있도록 변경
This commit is contained in:
Kijin Sung 2018-03-06 22:08:31 +09:00 committed by GitHub
commit c3df75bfee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 132 additions and 127 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").hide();
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

@ -3,6 +3,7 @@
<grants />
<actions>
<action name="dispEditorComponentInfo" type="view" />
<action name="dispEditorFrame" type="view" />
<action name="dispEditorPopup" type="view" />
<action name="dispEditorPreview" type="view" />
<action name="dispEditorSkinColorset" type="view" permission="all-managers" />

View file

@ -15,6 +15,40 @@ class editorView extends editor
{
}
/**
* @brief Display editor in an iframe
*/
function dispEditorFrame()
{
// 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
$oEditorModel = getModel('editor');
$option = $oEditorModel->getEditorConfig();
$option->editor_skin = 'ckeditor';
$option->content_style = 'ckeditor_light';
$option->sel_editor_colorset = 'moono-lisa';
$option->primary_key_name = 'primary_key';
$option->content_key_name = 'content';
$option->allow_fileupload = FALSE;
$option->enable_autosave = FALSE;
$option->enable_default_component = TRUE;
$option->enable_component = FALSE;
$option->height = 300;
$option->editor_focus = 'Y';
$editor = $oEditorModel->getEditor(0, $option);
Context::set('editor', $editor);
// Set template
$this->setLayoutPath('./common/tpl/');
$this->setLayoutFile("default_layout");
$this->setTemplatePath($this->module_path . 'tpl');
$this->setTemplateFile('editor_frame');
}
/**
* @brief Action to get a request to display compoenet pop-up
*/

View file

@ -4,6 +4,7 @@ function editorTextarea(editor_sequence) {
var primary_key = textarea.data("editor-primary-key-name");
var insert_form = textarea.closest("form");
var content_input = insert_form.find("input[name='" + content_key + "']");
var content = "";
// Set editor keys
editorRelKeys[editor_sequence] = {};
@ -16,7 +17,7 @@ function editorTextarea(editor_sequence) {
// Load existing content
if (content_input.size()) {
var content = String(content_input.val()).stripTags();
content = String(content_input.val()).stripTags();
content_input.val(content);
textarea.val(content.unescape());
}
@ -25,4 +26,19 @@ function editorTextarea(editor_sequence) {
textarea.on("change", function() {
content_input.val(String(jQuery(this).val()).escape());
});
// Copy content to another input and resize iframe if configured
if (window.editor_resize_iframe && window.editor_copy_input)
{
content = String(editor_copy_input.val()).stripTags();
editor_copy_input.val(content);
textarea.val(content.unescape());
textarea.on("resize", function(e){
editor_resize_iframe.height(textarea.height());
});
textarea.on("change", function() {
editor_copy_input.val(String(textarea.val()).escape());
});
editor_resize_iframe.height(textarea.height());
}
}

View file

@ -0,0 +1,18 @@
<script>
$(function() {
var parent = window.opener ? window.opener : window.parent;
window.editor_copy_input = $("#{$parent_input_id}", parent.document);
window.editor_resize_iframe = window.editor_copy_input.siblings("iframe.editor_iframe");
});
</script>
<style>
body { margin: 0; }
.wfsr { display: none; }
</style>
<form>
<input type="hidden" name="primary_key" id="primary_key" value="" />
<input type="hidden" name="content" id="content" value="" />
{$editor}
</form>

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

@ -63,7 +63,6 @@
<action name="dispMemberAdminConfig" type="view" menu_name="userSetting" menu_index="true" />
<action name="dispMemberAdminFeaturesConfig" type="view" menu_name="userSetting" />
<action name="dispMemberAdminAgreementsConfig" type="view" menu_name="userSetting" />
<action name="dispMemberAdminAgreementsEdit" type="view" menu_name="userSetting" />
<action name="dispMemberAdminSignUpConfig" type="view" menu_name="userSetting" />
<action name="dispMemberAdminLoginConfig" type="view" menu_name="userSetting" />
<action name="dispMemberAdminDesignConfig" type="view" menu_name="userSetting" />

View file

@ -262,6 +262,8 @@ class memberAdminController extends member
$agreement = new stdClass;
$agreement->title = escape(utf8_trim($args->{'agreement_' . $i . '_title'}));
$agreement->content = $args->{'agreement_' . $i . '_content'};
$agreement->use_editor = $args->use_editor;
getModel('editor')->converter($agreement, 'document');
$agreement->type = $args->{'agreement_' . $i . '_type'};
if (!in_array($agreement->type, array('required', 'optional', 'disabled')))
{

View file

@ -157,40 +157,6 @@ class memberAdminView extends member
$this->setTemplateFile('agreements_config');
}
/**
* Display the agreements edit form.
*
* @return void
*/
public function dispMemberAdminAgreementsEdit()
{
// Check parent input ID
$parent_input_id = Context::get('parent_input_id');
Context::addBodyClass('disable_debug_panel');
// Load editor
$oEditorModel = getModel('editor');
$option = $oEditorModel->getEditorConfig();
$option->editor_skin = 'ckeditor';
$option->content_style = 'ckeditor_light';
$option->sel_editor_colorset = 'moono-lisa';
$option->primary_key_name = 'primary_key';
$option->content_key_name = 'content';
$option->allow_fileupload = FALSE;
$option->enable_autosave = FALSE;
$option->enable_default_component = TRUE;
$option->enable_component = FALSE;
$option->height = 300;
$option->editor_focus = 'Y';
$editor = $oEditorModel->getEditor(0, $option);
Context::set('editor', $editor);
// Set template
$this->setLayoutPath('./common/tpl/');
$this->setLayoutFile("default_layout");
$this->setTemplateFile('agreements_edit');
}
public function dispMemberAdminSignUpConfig()
{
$config = $this->memberConfig;

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,32 +0,0 @@
<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());
});
});
</script>
<style>
body { margin: 0; }
.wfsr { display: none; }
</style>
<form>
<input type="hidden" name="primary_key" id="primary_key" value="" />
<input type="hidden" name="content" id="content" value="" />
{$editor}
</form>

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("act", "dispMemberAdminAgreementsEdit").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);