메뉴 건너뛰기

MH

Home > Rhymix > Rhymix 팁
XE타운
2016.12.25 13:54

글 작성전 에디터에 미리 준비된 메세지 보이기 ckeditor, xpresseditor

팔공산
조회 수 23,414 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록
?

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록
첨부파일 등록일 파일크기 다운 수
Extra Form
원작자 구름이
출처 https://www.xetown.com/index.php?mid=lak...srl=454176
적용여부 NO
적용페이지 https://moonhouse.co.kr/qa
[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-->

빨간색 부분 추가하시면 이미지와 같이 작동됩니다.

 

QNA_001.png

이미지는 xpresseditor_axupload5_imgur 에디터를 캡쳐한 것입니다.

 

참고로 xpresseditor에디터의 경우는 사이트별로 다른 문구를 출력하게 수정했습니다.( qa, free 게시판 )

 

이 자료의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
 
#연관글
  1. RM 팁 말풍선(툴팁) 애드온을 이용한 위젯설정 [2017-11-07] *7
  2. RM 팁 레이아웃 최상단에 애니메이션 효과로 펼쳐지는 메뉴 [2017-01-04]
  3. RM 팁 팝업창을 마우스로 이동 가능하게 하는 방법 [2017-01-02]
  4. 나의 RM 메뉴바에 토글메뉴 추가하기 [2011-07-15] *1
  5. RM 팁 새글/업데이트/이미지/동영상/첨부파일 아이콘 감추기 [2010-01-16] *4
이 Tip의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
TAG •
0 좋아요
Atachment
첨부
목록
Facebook Twitter Pinterest Band KakaoStory Kakao
위로 아래로 인쇄 첨부 목록
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
✔ 이 글 평점 주기
★★★★★
5점
에디터 선택하기
?
스티커
에디터 사용하기 닫기
스티커

Xe Tips

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용페이지 추천 수 평점
229 XE타운 10원짜리 깜빡이로 강조하기 팁 file 웹지기 2018.01.29 598 0
228 문하우스 SoSiFam 한 줄 메모 게시판 라이믹스에서 사용 가능하게 편집 2 file 80san 2018.01.27 2,459 5
227 문하우스 라이믹스에서 내용글 없이 글 작성하기 1 file 80san 2018.01.27 1,809 1
226 문하우스 문하우스의 라이믹스 업데이트 여정 5 file 2018.01.27 1,537 5
225 XE타운 간단한 게시물 주소 복사 버튼 달기 5 file 돼둥이 2018.01.22 1,176 5
224 문하우스 게시판 설정 위자드 생성하는 방법 file 80san 2018.01.21 1,153 0
223 문하우스 squarenet.kr에서 제공하는 cPanel 무료 웹서브 세팅 따라하기 3 file 80san 2018.01.15 980 0
222 Xe 로그인 ID를 이메일에서 아이디로 변경하는 방법 file 불금 2018.01.13 619 0
221 문하우스 말풍선(툴팁) 애드온을 이용한 위젯설정 7 file 80san 2017.11.07 1,457 Sample 6
220 XE타운 라이믹스 스케치북 게시판 및 스케치북 게시판 1.72 스크롤 이슈 file 도리 2017.10.07 760 0
219 문하우스 본문에 삽입된 이미지들이 사라진 경우 file 80san 2017.09.25 823 0
218 XE타운 확장변수중 "단일 선택(radio)"시 "직접입력" 부분 나오게 수정 file 윤삼 2017.05.19 1,497 0
217 기타 대댓글에 'OOO님에게 달린 댓글' 구현하기 6 file Str@wBerry♪'· 2017.05.16 1,281 5
216 XE타운 게시판 리스트 확장변수 항목에 css 입히기 13 file 윤삼 2017.04.22 1,520 Sample 5
215 XE타운 제목에 태그 출력하고 링크 걸기 file socialskyo 2017.03.20 4,476 Sample 0
214 Xe "이 페이지 나가기" 경고창이 뜨는 사이트의 경우 투씨 2017.02.09 1,613 0
213 Xe xe업데이트 후 member모듈 업데이크가 되지 않을때 file 고니고니 2017.02.03 719 0
212 문하우스 레이아웃 최상단에 애니메이션 효과로 펼쳐지는 메뉴 file 80san 2017.01.04 3,098 Sample 0
211 문하우스 팝업창을 마우스로 이동 가능하게 하는 방법 file 80san 2017.01.02 3,488 Sample 0
210 기타 [XE Core 1.4.4 이상] 새 템플릿 문법을 쉽게 알아보자. SMaker 2016.12.26 518 0
목록
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 18 Next
/ 18
  1. 나의XE
  2. Xe자료
  3. Xe팁
  4. Html
  5. Layouts
  6. QnA
위로