XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
?

단축키

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
    스케치북 게시판 적용은 어떻게 하나요?

List of Articles
번호 분류 제목 글쓴이 날짜
4967 질문/답변 라이믹스 버그인가요? 4 라그릿 2017.03.22
4966 질문/답변 iwinv 라이믹스 설치가 안되요!? 7 file 로보 2017.03.22
4965 질문/답변 게시물 첫글로 바로 들어갈수 없을까요? 7 착한악마 2017.03.22
4964 질문/답변 혹시 XE최신버젼에서 데이타이전툴 정상작동하나요? 2 영흥도우럭 2017.03.22
4963 질문/답변 후하니 님이 만드신 스티커 모듈 버튼이 안눌려져요 이상한 점두 생겼구요 27 file 순결 2017.03.22
4962 질문/답변 청와통닭 레이아웃중 3 명예찬 2017.03.22
4961 질문/답변 위젯을 내용 직접 추가로 생성하면 안보여요 3 피피포 2017.03.21
4960 불편/개선 요청 XE 본문 에디터 소소한 불편한 점... 1 Blues 2017.03.21
4959 질문/답변 소셜로그인 문제 입니다 ㅠ file 낙타 2017.03.21
4958 질문/답변 모바일에서 글쓰기 하면 에디터 나오는데 이거 어떻게 없애나요 10 file 가이더 2017.03.21
4957 질문/답변 쉬운설치>>코어 업그레이드 시 "서버 접속이 원활하지 않습니다" 3 lis**** 2017.03.21
4956 질문/답변 원래 어드민 모듈도 스킨 설정할 수 있지 않았나요..? 5 하늘희 2017.03.21
4955 질문/답변 본문내 이미지 클릭시 확대 이미지 1 똑띠 2017.03.21
4954 질문/답변 게시글 작성자의 댓글에만 색상박스가 되게.. 6 라그릿 2017.03.21
4953 질문/답변 원래 관리자 페이지에서 대댓글은 여러개 삭제못하나요? 라그릿 2017.03.21
4952 질문/답변 모바일에서요 2 트리플라워 2017.03.21
4951 질문/답변 sitemaplite 모듈 사이트맵 언제 생성되나요? 15 웹지기 2017.03.21
4950 아이디어 제안/공유 대댓글 페이지네이션 1 file Jack 2017.03.21
4949 질문/답변 청와통닭 레이아웃과 위젯에서 에러가 발생합니다. 마시마로 2017.03.21
4948 질문/답변 레이아웃 라이센스 문구 질문이있어서 보다 든 생각인데 3 라그릿 2017.03.21
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 253 Next
/ 253
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...