[ckeditor 적용방법]
XE설치경로/modules/editor/skins/ckeditor/editor.html
<!-- css -->
<load target="css/default.css" />
<load target="../../../../common/xeicon/xeicon.min.css" />
<!-- JS -->
<!--%load_js_plugin("ckeditor")-->
<load target="../../tpl/js/editor_common.js" />
<load target="../../tpl/js/editor.app.js" />
<load target="js/xe_interface.js" />
{@ $css_content = null }
<!--@if($content_font || $content_font_size)-->
<!--@if($content_style === 'ckeditor_light')-->{@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); }<!--@endif-->
{@ $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-->
{@
$do_mid=array('support','qna');
}
<!--@if(!$document_srl && in_array($mid,$do_mid) && $act=="dispBoardWrite")-->
<style>
#ckeditor_instance_overlay { cursor:pointer; position:absolute; z-index:99999; }
#ckeditor_instance_overlay .ov_content { padding:100px 0 0 10px; color:black; font-size:14px; font-weight:400; cursor:pointer; }
</style>
<div id="ckeditor_instance_overlay" onclick="overlay_out(this)" style="min-height:{$editor_height}px;">
<div class="ov_content">
기술 지원 문의일 경우 아래를 확인해 주세요.
1.내용
2.내용
3.가능하다면 발생되는 문제점을 확인할 수 있도록 URL을 남겨 주세요.
*작성 하신 글의 제목은 질문 내용에 맞도록 관리자가 임의 수정할 수 있습니다.
*클릭 하시면 글을 작성 하실수 있습니다.
</div>
</div>
<!--@end-->
<div id="ckeditor_instance_{$editor_sequence}" data-editor-sequence="{$editor_sequence}" data-editor-primary-key-name="{$editor_primary_key_name}" data-editor-content-key-name="{$editor_content_key_name}" style="min-height:{$editor_height}px;"></div>
<block cond="$allow_fileupload">
<include target="file_upload.html" />
</block>
<script>
(function($){
"use strict";
// editor
$(function(){
<!--@if(!FileHandler::exists('common/js/plugins/ckeditor/ckeditor/config.js'))-->CKEDITOR.config.customConfig = '';<!--@endif-->
var settings = {
ckeconfig: {
height: '{$editor_height}',
skin: '{$colorset}',
contentsCss: '{$content_style_path}/editor.css',
xe_editor_sequence: {$editor_sequence},
toolbarCanCollapse: true,
language: "{str_replace('jp','ja',$lang_type)}"
},
loadXeComponent: true,
enableToolbar: true,
content_field: jQuery('[name={$editor_content_key_name}]')
};
<!--@if($enable_component)-->
{@ $xe_component = array(); }
<!--@foreach($component_list as $component_name => $component)-->
{@ $xe_component[] = $component_name . ":'" . htmlentities($component->title, ENT_QUOTES, 'UTF-8') . "'"; }
<!--@endforeach-->
{@ $xe_component = implode(',', $xe_component); }
settings.ckeconfig.xe_component_arrays = {{$xe_component}};
<!--@endif-->
<!--@if(!$enable_default_component)-->
settings.enableToolbar = false;
settings.ckeconfig.toolbarCanCollapse = false;
<!--@endif-->
<!--@if(!$enable_component)-->
settings.loadXeComponent = false;
<!--@endif-->
<!--@if($module_type === 'comment'||Mobile::isMobileCheckByAgent())-->
settings.ckeconfig.toolbarStartupExpanded = false;
<!--@endif-->
<!--@if(!$html_mode)-->
settings.ckeconfig.removeButtons = 'Save,Preview,Print,Cut,Copy,Paste,Source';
<!--@endif-->
<!--@if($css_content)-->CKEDITOR.addCss('{$css_content}');<!--@end-->
var ckeApp = $('#ckeditor_instance_{$editor_sequence}').XeCkEditor(settings);
jQuery("#ckeditor_instance_overlay").css("width",jQuery("#ckeditor_instance_{$editor_sequence}").css("width"));
});
})(jQuery);
function overlay_out(obj){
jQuery(obj).fadeOut(1000);
CKEDITOR.instances.editor1.focus();
}
</script>
빨간색 부분 추가하시면 됩니다.
[xpresseditor 적용방법]
XE설치경로/modules/editor/skins/xpresseditor/editor.html
- 상단생략 -
<ul class="extra3"<!--@if(!$html_mode)--> style="display:none"<!--@end-->>
<!--// HTML 모드 사용 -->
<li class="html"><span><button class="xpress_xeditor_mode_toggle_button" type="button" title="{$lang->edit->html_editor}">{$lang->edit->html_editor}</button></span></li>
<!--// li class="preview"><span><button type="button" class="xpress_xeditor_preview_button" title="{$lang->cmd_preview}">{$lang->cmd_preview}</button></span></li-->
</ul>
</div>
<!--@else-->
<div class="tool off disable"></div>
<!--@end-->
<!-- 에디터창에 클릭시 사라지는 문구 출력 -->
{@
$do_mid=array('qa','free');
}
<!--@if(!$document_srl && in_array($mid,$do_mid) && $act=="dispBoardWrite")-->
<style>
#xe-editor-instance-overlay { cursor:pointer; position:absolute; z-index:99999; }
#xe-editor-instance-overlay .ov_content { padding-top:50px; }
#xe-editor-instance-overlay .ov_content p { padding:10px 0 0 20px; color:#888; font-size:16px; font-weight:400; cursor:pointer; }
</style>
<div id="xe-editor-instance-overlay" onclick="overlay_out(this)" style="min-height:{$editor_height}px;">
<div class="ov_content">
<!--@if($mid=="qa")-->
<p>[ 기술 지원 문의일 경우 아래를 확인해 주세요 ]</p>
<p>1.내용 : </p>
<p>2.증상 : </p>
<p>3.가능하다면 발생되는 문제점을 확인할 수 있도록 URL을 남겨 주세요.</p>
<p>*클릭 하시면 글을 작성 하실수 있습니다.</p>
<!--@else if($mid=="free")-->
<p>자유롭게 글 남겨 주시면 됩니다.</p>
<p>성인용광고는 극구 사영하며 광고글은 되도록이면 자제 바랍니다. </p>
<p>*클릭 하시면 글을 작성 하실수 있습니다.</p>
<!--@end-->
</div>
</div>
<!--@end-->
<!-- /에디터창에 클릭시 사라지는 문구 출력 -->
<!-- 에디터 출력 -->
<div id="xe-editor-container-{$editor_sequence}" class="input_area xpress_xeditor_editing_area_container">
<textarea id="xpress-editor-{$editor_sequence}" rows="8" cols="42"></textarea>
</div>
- 중간 생략 -
<script>//<![CDATA[
var editor_path = "{$editor_path}";
var auto_saved_msg = "{$lang->msg_auto_saved}";
var oEditor;
oEditor = editorStart_xe("{$editor_sequence}", "{$editor_primary_key_name}", "{$editor_content_key_name}", "{$editor_height}", "{$colorset}", "{$content_style}",'{$content_font}','{$content_font_size}');
var editorSequence = {$editor_sequence};
jQuery("#xe-editor-instance-overlay").css("width",jQuery("#xe-editor-instance-overlay_{$editor_sequence}").css("width"));
<!--@if($allow_fileupload)-->
<!--@if($editor_class == "black")-->
<load target="_AXJ/ui/black/AXJ.css" />
<load target="_AXJ/ui/black/AXButton.css" />
<load target="_AXJ/ui/black/AXUpload5.css" />
<!--@else-->
<load target="_AXJ/ui/default/AXJ.css" />
<load target="_AXJ/ui/default/AXButton.css" />
<load target="_AXJ/ui/default/AXUpload5.css" />
<!--@end-->
<load target="_AXJ/lib/AXJ.js" />
<load target="_AXJ/lib/AXUpload5.js" />
<load target="js/AXUpload5forNuri.js" />
jQuery(document.body).ready(function(){
setTimeout(function(){
editorUploadInit({
"editorSequence" : {$editor_sequence},
"sessionName" : "{session_name()}",
"allowedFileSize" : "{$file_config->allowed_filesize}",
"allowedFileTypes" : "{$file_config->allowed_filetypes}",
"allowedFileTypesDescription" : "{$file_config->allowed_filetypes}",
"insertedFiles" : {(int)$files_count},
"replaceButtonID" : "swfUploadButton{$editor_sequence}",
"fileListAreaID" : "uploaded_file_list_{$editor_sequence}",
"previewAreaID" : "preview_uploaded_{$editor_sequence}",
"uploaderStatusID" : "uploader_status_{$editor_sequence}",
"uploadMaxTotalFileSize" : {$file_config->allowed_attach_size},
"uploadLeftFileSize" : {($file_config->allowed_attach_size-$attached_size)},
"uploadMaxFileSize" : {$file_config->allowed_filesize},
"allowed_filetypes" : "{$file_config->allowed_filetypes}",
"lang" : {
"uploadButtonTitle" : "{$lang->edit->upload_file}",
"uploadButtonEditor" : "{$lang->edit->link_file}",
"error_fileSize" : "{$lang->AXerror_fileSize}",
"error_html5Support" : "{$lang->AXerror_html5Support}",
"error_fileCount" : "{$lang->AXerror_fileCount}",
"msg_file_cart_is_null" : "{$lang->msg_file_cart_is_null}",
"confirm_delete" : "{$lang->confirm_delete}",
"error_deleteQueue" : "{$lang->AXerror_deleteQueue}",
"uploadSelectTxt" : "{$lang->AXuploadSelectTxt}",
"dropZoneTxt" : "{$lang->AXdropZoneTxt}",
"cancelMsg" : "{$lang->AXcancelMsg}",
"allowed_filetypes" : "{$lang->AXallowed_filetypes}",
"uploadFileSize" : "{$lang->AXuploadFileSize}",
"res_error" : "{$lang->AXres_error}",
"error_coverNone" : "{$lang->AXerror_coverNone}",
"error_coverSelect" : "{$lang->AXerror_coverSelect}",
"error_coverImage" : "{$lang->AXerror_coverImage}"
}
});
}, 1);
});
<!--@end-->
//]]>
function overlay_out(obj){
jQuery(obj).fadeOut(1000);
xe-editor-instance-overlay .instances.editor1.focus();
}
</script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript" src="js/zip.js"></script>
<!--@end-->
빨간색 부분 추가하시면 이미지와 같이 작동됩니다.
이미지는 xpresseditor_axupload5_imgur 에디터를 캡쳐한 것입니다.
참고로 xpresseditor에디터의 경우는 사이트별로 다른 문구를 출력하게 수정했습니다.( qa, free 게시판 )