RX / XERXE 활용팁XpressEngine
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부

ck 에디터용입니다.

pc 버전입니다.

 

 

<!-- 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")-->
<div id="ckeditor_instance_overlay" onclick="overlay_out(this)" style="min-height:{$editor_height}px;">
<div class="ov_content">
<br>
<br>
기술 지원 문의일 경우 아래를 확인해 주세요.<br>
<br>
1.내용<br >
2.내용 <br>
3.가능하다면 발생되는 문제점을 확인할 수 있도록 URL을 남겨 주세요.<br>
<br>
*작성 하신 글의 제목은 질문 내용에 맞도록 관리자가 임의 수정할 수 있습니다.<br>
*클릭 하시면 글을 작성 하실수 있습니다.
</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>

추가된 소스

25~52 라인
111 라인
116~119 라인

26 라인 - $do_mid=array('support','qna'); <- 작동할 mid 지정입니다.

 

css 추가

#ckeditor_instance_overlay{
cursor:pointer;
position:absolute;
top:164px;
z-index:99999;

}

#ckeditor_instance_overlay .ov_content{
padding:10px 0 0 10px;
color:black;
font-size:14px;
font-weight:400;
cursor:pointer;
}

 

소스 파일 : editor.zip

미리보기 : https://www.xeyeyak.com/main/support 글쓰기 클릭해보세요. PC 버전만 적용 해두었습니다.

 

모바일도 참고하셔서 수정하시면 잘 될겁니다^^;;

글쓴이 구름이

profile
구름입니다^^
Atachment
첨부 1
  • profile
    기진곰 2016.12.21 00:36:17
    유용한 기능이네요. 라이믹스에서 기본 지원을 고려해 봐야겠습니다 ㅎㅎ
  • profile
    구름이 2016.12.21 08:13:33
    기본으로 지원하면 정말 편리하겠습니다 ㅎ
  • profile
    Double'U' 2016.12.21 10:33:09
    기본지원이라면 게시판 설정에서 문구를 입력할수 있게 된다는 것이겠군요!
  • profile
    웹지기 2016.12.21 11:12:39
    게시판별로 다르게 적용하려면 방법이 있을까요?
  • profile
    구름이 2016.12.21 11:24:20

    26라인 $do_mid=array('support','qna'); 작동할 게시판 확인해 주시구요.
    게시판 별로 출력되는 내용을 변경하시려면 아래를 참고해 주세요.

     

    <div class="ov_content">
    <!--@if($mid=="1번mid")-->
    1번 mid 내용
    <!--@else if($mid=="2번mid")-->
    2번 mid 내용
    <!--@end-->
    </div>

     

  • profile
    웹지기 2016.12.21 11:31:26
    감사합니다. 게시판별로 안내가 다른 경우 사용할 수 있겠습니다.
  • profile
    웹지기 2016.12.21 11:31:03
    모바일도 참고하셔서 수정하시면 잘 될겁니다^^;;

    막줄이 살짝... 이해가.. 에디터는 모바일과 PC모두 함께 적용받을텐데요.. 모바일은 별도 추가로 필요한 부분이 있나요?
  • profile
    구름이 2016.12.21 11:34:31

    제가 모바일에서 웹에디터를 사용하지 않아 테스트도 안해봐서..
    우선 모바일은 안된다고 해뒀습니다.

    모바일은 CSS 만 수정 하시면 될거에요.
    #ckeditor_instance_overlay{
    cursor:pointer;
    position:absolute;
    top:164px;
    }

    top 으로 높이 정도만 맞춰 주면 잘 될거라 생각됩니다.

  • profile
    웹지기 2016.12.21 11:38:35
    모바일에서 안내문구 출력위치가 지면의 협소로 인해 위치나 다른 수정이 필요하다는 말씀이시군요.
    @media ? 이것을 이용하면 될것 같네요.
    감사합니다.
  • profile
    웹지기 2016.12.21 12:10:47
    질문이 많아 죄송합니다.
    저희 사이트에서는 #ckeditor_instance_overay .ov_content
    이부분이 적용이 안되네요.

    path를 확인해 보면 //*[@id="ckeditor_instance_overlay"]/div

    이렇게 확인됩니다.
  • profile
    구름이 2016.12.21 12:20:07
    css 는 저도 배우는 입장이라 잘 모르지만..

    <div class="ov_content"> 를 <div id="ov_content">로 변경하셔서 css를 지정해주시면 될거 같아요.
    #ckeditor_instance_overay .ov_content 아닌 #ov_content 로 바로 지정..
  • profile
    웹지기 2016.12.21 12:47:24

    현재 css 를 적용하는데 약간 애로사항이 있네요. 게시판별로 사용자정의 사용등이 다르니 상단으로 부터 높이가 어떤경우는 에디터 안으로 들어오고 어떤 경우는 사용자정의에 머무르고 또는 회원별로 사용자정의 노출 여부에 따라 위치가 달라져서 이부분 저도 고민해 보겠습니다.

     

    사용자정의 여부에 따라 달라진 높이는 게시판별로 <BR>로 조절하면 될것 같군요.

    그런데 회원별로 달라지는 높이는 변수를 사용하던지 해보겠습니다.

  • profile
    구름이 2016.12.21 13:50:57
    게시판 별로 css를 별도로 정의를 해주시면 될것 같습니다.
    잘 사용되길 바라겠습니다.
  • profile
    웹지기 2016.12.21 14:04:17
    네. 게시판과 회원그룹 모바일 등을 적절히 고려해서 상단 높이를 맞추고 있습니다. 감사합니다.
  • profile
    웹지기 2016.12.21 21:49:09

    사용자정의를 상단에 올려서 쓰는 경우 div 높이를 고정하면 안내문구 위치가 제각각입니다. 그래서 이것을 극복하는 방법으로는

    <div id="ckeditor_instance_overlay" class="{$mid}" onclick="overlay_out(this)" style="min-height:{$editor_height}px;">

    이렇게 class 를 별도로 MID명으로 가지게 해서 각 게시판마다 고유의 클래스를 가지게 해줍니다.


    그리고

    별도로 높이를 조절하고 싶은 게시판들의 MID명을 클래스로해서...
    #ckeditor_instance_overlay.join{

    top:375px;


    }

    이런식으로 해주면 join이라는 이름을 가진 게시판에서는 375px의 위치로 높이가 잡힙니다.


    그리고 모바일에서는 높이를 다시 잡아줘야 하는데 저는 그냥 귀찮아서 가로폭으로 잡아주었습니다.
    @media screen and (max-width: 768px){
    #ckeditor_instance_overlay.join{

    top:440px;}
    .ov_content {min-height:290px;}
    .ov_content1 {min-height:290px;}
    .nickname_change .ov_content1 {
    margin-top:170px;
    }
    }

    이런식으로 높이를 다시 잡아주기도 하고 세세한 틀어짐도 이렇게 가로폭에 맞춰 다시 잡아줍니다.

    그런데 모바일에서는 가로폭이 좀더 좁아지면 높이가 또 틀려져야 합니다. 왜냐면 가로가 좁아지면서 세로가 밀리기 때문인데요..


    @media screen and (max-width: 375px){
    #ckeditor_instance_overlay.nickname_change{
    top:340px;
    }
    .nickname_change .ov_content1 {
    margin-top:180px;
    }
    }

    이렇게 좁아짐이 더 심해져 특정 사이즈부터 세로가 더 밀리는 경우 세세하게 또 잡아주면됩니다.
    (단말기가 종류별로 없어도 크롬개발자도구에서 기종별로 확인해서 수치를 조절할 수 있습니다.)


    단, 태블릿에서는 에디터상단이 아마 접히고 가로가 넓어서 이부분은 그냥 틀어져도 저는 그냥 두는 것으로 했습니다.


    그리고 이런식으로 처리하면 게시판별로 다른 배경이미지를 넣을 수도 있습니다.

  • profile
    보고하비 2016.12.22 11:18:44
    이상하네요 이거 라이믹스에서는 안되는거죠?
  • profile
    기진곰 2016.12.22 11:42:04
    라이믹스에서는 수정해야 할 부분이 다를 수도 있어요. 워낙 많이 바뀌어서... ㅋ
  • profile
    구름이 2016.12.22 13:02:10
    저는 라이믹스는 모듈 작동 테스트용으로 사용합니다.
    실 사용은 XE라서.. 기진곰님 말처럼 라이믹스는 에디터 부분 소스가 좀 다른가 봅니다.
  • profile
    보고하비 2016.12.22 14:36:53
    네 아무리 해봐도 안되서 포기 했습니다.
  • profile
    이성민 2016.12.23 19:44:12
    스케치북 게시판 적용은 어떻게 하나요?

서버에 요청 중입니다. 잠시만 기다려 주십시오...