Bootstrap grid

https://ckeditor.com/cke4/addon/btgrid


image.png   image.png

 

Col 1 content area

Col 2 content area

Col 3 content area

 

  1. btgrid_1.0b1.zip 를  /ckeditor/plugins/btgrid 위치로 업로드 후 압축 해제
  2. CKEditor config.js config.extraPlugins = 'btgrid'; 추가 
    더 보기...

    XE 라이믹스에서는  관리자> 고급> 에디터> 공통설정> 추가 플러그인 로드 부분에 btgrid 추가 

     

  3. /btgrid/styles/editor.css 를 최종적으로 보여질 html 파일에도 넣어줘야 최종 화면에서 모양이 유지됨

    더 보기...

    XE 라이믹스 에서는 관리자>... 레이아웃> html/css> css  부분에 css파일을 import

    @import url('//도메인/경로/ckeditor/plugins/btgrid/styles/editor.css');

     

     

<예시>
 

 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

emoji  플러그인은 CKEditor 4.11.1 이상 버전에서 작동합니다. 

연결되어 있는 아래의 모든 플러그인이 설치되어 있어야 작동합니다. 

 

  1. emoji
  2. Autocomplete
  3. Text Match
  4. Ajax Data Loading
  5. Panel Button
  6. Floating Panel
  7. xml

각각의 설치 방법은 아래 내용을 참고하세요. 

아래 플러그인을 추가로 설치하세요. 
emoji > 설치 경로 ../ckeditor/plugins/emoji 
Autocomplete > 설치 경로 ..//ckeditor/plugins/autocomplete
Text Match > 설치 경로../ckeditor/plugins/textmatch
Ajax Data Loading > 설치 경로../ckeditor/plugins/ajax
Panel Button > 설치  경로../ckeditor/plugins/panelbutton
Floating Panel > 설치  경로../ckeditor/plugins/floatpanel
xml > 설치 경로../ckeditor/plugins/xml


../ckeditor/config.js 파일에 플러그인을 설정하고, 도구모음 아이콘을 등록하세요. 

config.extraPlugins = 'emoji, textmatch, ajax, autocomplete, panelbutton, floatpanel, xml';

 

config.toolbar = [

    { name:'추가플러그인', items:['EmojiPanel'] }

];
 


각 설치 파일은 아래에서 다운받으세요. 

emoji_4.11.1.zip

ajax_4.11.1.zip

autocomplete_4.11.1.zip

floatpanel_4.11.1.zip

panelbutton_4.11.1.zip

textmatch_4.11.1.zip

xml_4.11.1.zip

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CKEditor 스타일 리스트에 스타일 추가하기 
style_list.jpg

 

ckeditor/styles.js 파일을 수정합니다. 

 

CKEDITOR.stylesSet.add( 'default', [
     {
        name: 'r8 #999 default',
        element: 'div',
        styles: {

            padding: '5px 10px',
            background: '#999',
            border: '1px solid #ccc',
            'border-radius': '8px 8px 8px 8px'

        }
    },

] );

 

Atachment
첨부 '1'
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

spacingsliders  for ckeditor

 

다운로드> 여기클릭

 

설치 위치
> ckeditor/plugins/spacingsliders

 

설정 추가 
> config.extraPlugins = 'spacingsliders';

 

  • dodo 2018.11.09 06:40

    줄간격과 자간을 동시에 적용할수 없어 사용하지 않음 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CKEditor Plugins <Hkemoji>

 

Hkemoji.jpg

 

 

다운로드 경로 > https://ckeditor.com/cke4/addon/hkemoji   또는 여기클릭

           

설치경로> ...ckeditor/plugins/hkemoji

 

[환경 설정]

ckeditor/config.js

config.extraPlugins = 'hkemoji';


config.toolbar = [
...    
{ name: 'insert3', items: [ 'HKemoji' ] },
...     
 ];

Atachment
첨부 '1'
  • dodo 2018.11.09 06:45

    적용시 이미티콘 이름을 직접 지정해 줘야 하는 문제가 있어서 사용하지 않음

    Arrow Right  XE 에디터 컴포넌트의 이모티콘을 사용하면 동일한 구성이 가능함 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

코드스니펫 테마 변경합니다. 

 

var cow = new Mammal( "moo", {
	legs: 4
} );

 

 하이구야 
  • dodo 2018.10.13 18:37
    code

     

  • dodo 2018.10.14 01:43

    ..xe/common/css/bootstrap.min.css

    pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}

    위 부분의 background-color:#f5f5f5; Angle Double Right   background-color:#808880

  • dodo 2018.10.14 07:54

    code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}

  • dodo 2018.10.14 12:09 SECRET

    "비밀글입니다."

  • dodo 2018.10.14 12:50

    https://colorscripter.com/

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

https://maesiltea.iptime.org/zbxe/index.php?mid=diary&category=55728&document_srl=60365

 

 

  • dodo 2018.08.31 00:52

    https://www.tuwlab.com/computer/9086

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

이 게시판의 CKEditor에 적용한 웹폰트 목록입니다. 

맑은 고딕 ABCabc 123

궁서 ABCabc 123

나눔손글씨 붓 ABCabc 123

나눔손글씨 펜 ABCabc 123

제주한라산 ABCabc 123

노토산스 한글 ABCabc 123

연성 Yeon Sung 123

서툰이야기 Poor Story 123

PaytoneOne 한글 123

Work Sans 한글 123

Akronim 한글 123

Allura 한글 123

Macondo 한글 123

Indie Flower 한글 123

Dancing Script 한글 123

Cabin Sketch 한글 123 

 

 

 

  • dodo 2018.11.23 16:22

    < 추가 >

    제주고딕

    어비 스위트

     

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

File Uploader by Uploadcare

출처 : https://ckeditor.com/cke4/addon/uploadcare
호환정보 : File Uploader by Uploadcare 3.0   ckeditor 4.9 / 4.8 / 4.7

구글드라이브, 플리커 등 클라우드 드라이브의 파일이나 이미지를 Ckeditor 에 삽입할 수 있게하는 플러그인입니다. 

uploadcare01.jpg

 

 [설정 방법]

  1. 플러그인 업로드  .../ckeditor/plugins/uploadcare
     
  2. .../ckeditor/config.js 에 확장플러그인 등록
    config.extraPlugins ='uploadcare';
     
  3. https://uploadcare.com/accounts/settings/ 에서 회원 가입 후 API Key 생성
    구글계정으로 소셜 회원가입이 가능합니다. 가입하고 API 키를 선택해서 생성하면 됩니다. 
     
  4. xe/modules/editor/skins/ckeditor/editor.html 맨 상단에 3. 에서 생성한 API Key 스크립트 추가

    <script>

        UPLOADCARE_PUBLIC_KEY = '7859a72cc41c660d0cb4';
    </script>
     

  5. ../xe/modules/editor/skins/ckeditor/editor.html 맨 중간 아래 코드를 추가

    // Initialize CKEditor settings.
    var settings = {
      // ..... ckeditor 툴바 설정 부분 하단에 아래 내용 추가...

      uploadcare: {
          publicKey: '
    7859a72cc41c660d0cb4', // set your public API key here
          multiple: true, // allow multi-file uploads
           crop: '1:1,4:3', // set crop options when handling images
           /* feel free to add more “object key” options here */
      },

    }

Atachment
첨부 '1'
  • dodo 2018.05.27 07:39

    File Uploader by Uploadcare 플러그인의 문제점이 있었으니 무료가 아니라는 것.
    무료 버전은 저장공간 500MB, 이미지만 사용이 가능합니다.
    PDF나 기타 파일의 업로드 등이 필요한 경우 유료버전(월 사용료)으로 전환해야 합니다.
    ★ 더 큰 문제는 클라우드에서 직접 파일을 링크하지 않는다는 거네요.
        File Uploader by Uploadcare 에서 각 클라우드로 로그인하여 자료를 가져오고 이 자료가 File Uploader by Uploadcare 서버에 다시 업로드 되는 구조입니다. 결국 클라우드에 있던 자료가 File Uploader by Uploadcare 에 다시 올라가는 거죠. 이렇게 되면 비밀자료를 링크했을 경우 클라우드에 비공개로 보관되어 있던 자료까지 File Uploader by Uploadcare에 재 공유되고 있게 되겠네요.
       저는 그저 가볍게 무료버전으로 클라우드 공개 이미지만 공유하는 목적으로 사용하기로 하였습니다.

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

다운로드 codesnippet_4.9.2.zip / 설치방법 Code Snippet _ CKEditor.pdf

원본출처   https://ckeditor.com/cke4/addon/codesnippet

 

본문에 코드를 삽입할 수 있게하고, 삽입된 코드는 각 언어에 따라 색상으로 명령을 구분해 줍니다. 

[설치방법]

1. .../ckeditor/plugins/codesnippet  위치에 업로드 
 

2.  .../ckeditor/config.js 파일에  아래 내용 삽입 

    config.extraPlugins = 'codesnippet';


3.  XE를 사용하는 경우 ...xe/modules/editor/skins/ckeditor/editor.html 에서 툴바 설정 추가 

toolbar: [
{ name: 'insert1', items: [ 'CodeSnippet' ] }
]


필요에 따라 댓글 툴바에도 설정 추가 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

xe/modules/board/skins/sketchbook5/css/m_editor.css

 

/* 모바일에서 에디터 툴바 문제 조치 - 아래 내용 추가 */

#cke_editor { display: none; }

 

 

https://xetown.com/qna/355441

 

/modules/board/m.skins/sketchbook5
여기서 write_form.html 와 _write_form_mobile.html

부분에서 

 {$oDocument->getEditor()} 나 {$commentt->getEditor()} 를 지움 

 

저는 지우지는 않고

<!--@if(!Mobile::isMobileCheckByAgent())-->

<!--@end-->
 

이걸로 묵었습니다.

기진곰님 말씀대로 모바일때 표시가 달라지는 코드가 있던데 제대로 작동을 안하더라구요

 

스케치북 기준으로 스케치북 폴더에서 css/m_editor.css을 열어서

 

#cke_editor { display: none; }

 

이것을 추가해주는 것 입니닷.

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CKEditor4 에서 Templates 플러그인에 템플릿을 추가하는 방법입니다.

ckeditor/plugins/templates/templates/default.js  파일을 열어서 편집합니다.

 

templete.jpg


CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[{title:"Image and Title",image:"template1.gif",description:"One main image with a title and text that surround the image.",html:'\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'},{title:"Strange Template",image:"template2.gif",description:"A template that defines two columns, each one with a title, and some text.",
html:'\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'},{title:"Text and Table",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'},{title:"Text and Table 2",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'}
]});

 

 

 

 

Atachment
첨부 '1'
  • dodo 2018.02.22 11:39

    세번째 템플릿 수정 

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"A title with some text and a table.",
    html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'}

  • dodo 2018.02.25 14:29

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"왼족이 오렌색 바가 있는 필드셋 양식",html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'},{title:"웹소스 입력 양식",image:"template4.gif",description:"제목 출처 소스코드 입력 양식",html:'<p><span style="color: rgb(221, 221, 221);font-size: 26px;font-family: Paytone One, 맑은 고딕;">Title Input Title Here</span><br /><span style="font-family: Georgia,serif;font-size: 16px;">&nbsp;&nbsp;LINK <span class="fav2"><i aria-hidden="true" class="fa fa-angle-double-right " style="color: rgb(255, 153, 0); font-size: 18px;" title="Angle Double Right "></i><span style="left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;">Angle Double Right </span></span>&nbsp;<span style="color: rgb(52, 152, 219);">Input URL Here</span></span></p></br><blockquote><p>source code here</p><p>...</p><hr style="color:#777;" /><table border="1" bordercolor="#777" cellpadding="0" cellspacing="0" style="width: 98%;"><tr><td bgcolor="#353535" style="width: 240px;">&nbsp;</td><td bgcolor="#353535" style="width: 200px;">&nbsp;</td><td bgcolor="#353535">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table></blockquote>'},{title:"탭모양 표 양식",image:"template5.gif",description:"탭 형태의 표 양식",html:'<table border="0" cellpadding="0" cellspacing="0" style="width:98%;"><tr><td style="width: 300px;"><div style="background: rgb(255, 153, 0); border-radius: 10px 20px 0px 0px; border: 1px solid rgb(255, 153, 0); padding: 5px 10px; text-align: center;"><strong><span style="color:#4e5f70;font-family:맑은 고딕;font-size:18px;">여기에 제목 입력</span></strong></div></td><td>&nbsp;</td></tr><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="height:100%;width:100%;border-style:solid;border-top-width: medium;border-bottom-width: medium;border-left-width: 20px;border-right-width: medium;border-color:#ff9900;border-radius:0px 5px 5px 5px;"><tr><td><p>&nbsp;여기에 본문을 입력</p><p>&nbsp;</p></td></tr></table></td></tr></table>'}

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

ckeditor/styles.js
 

    {
        name: 'Special Container',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc'
        }
    },

   {
        name: 'r8 #999 default',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#999',
            border: '1px solid #ccc',
            'border-radius': '8px 8px 8px 8px'
        }
    },    
    {
        name: 'left Blue Bar Container',
        element: 'div',
        styles: {
            padding: '4px 4px 4px 14px',
            margin: '6px 6px 20px',
            background: '#999',
            color: '#ddd',
            'box-sizing': 'border-box',
            'line-height': '1.4',
            'font-size': '15px',
            'border-left': '6px double #5BBFD9',
            'border-radius': '6px 6px 6px 6px'            
        }
    },

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

1. ckeditor/config.js 파일에서 폰트 등록 

config.font_names = '맑은 고딕;굴림;돋움;바탕;궁서;나눔손글씨 붓/Nanum Brush Script;나눔손글씨 펜/Nanum Pen Script;제주한라산/Jeju Hallasan;노토산스 한글/Noto Sans KR;Paytone One;Work Sans;Akronim;Allura;Macondo;Indie Flower;Dancing Script;' + CKEDITOR.config.font_names;

 

2. ckeditor/skins/moono-dark/editor.css  맨 상단에 폰트 등록

편집기 도구상자에서 폰트 모양을 보면서 선택할 수 있습니다. 

ckeditor-fontmenu.jpg

/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
@import url(//도메인/xe/common/css/bootstrap.min.css);    부트스트랩
@import url(//도메인/xe/common/css/fontawesome/838cb3dd77.css);    폰트어썸
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);    제주한라산
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);     노토산스한글
@import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Myeongjo|Nanum+Pen+Script|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');       기타 추가되는 구글 웹폰트
.cke_reset{

 

3. XE 관리자 > 사이트 디자인 설정 > 레이아웃 > HTML/CSS  부분의 CSS - layout.css 에 아래 내용추가 

XE 게시판 본문 보기에서 글꼴이 표시됨 

@import url(//도메인/xe/common/css/bootstrap.min.css);
@import url(//도메인/xe/common/css/fontawesome/838cb3dd77.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Myeongjo|Nanum+Pen+Script|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900'); 

Atachment
첨부 '1'
  • dodo 2018.02.20 18:09

    xe/modules/editor/tpl/css/editor.css

  • dodo 2018.02.20 18:11

    xe/modules/editor/styles/ckeditor_dark/style.css

    xe/modules/editor/styles/ckeditor_dark/editor.css

  • dodo 2018.02.20 20:05

    ckeditor/skins/moono-dark/dialog.css

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

/ckeditor/skin/moono-dark/editor.css

이미지(230*140) 설명 코드
image.png
상단 툴바 테두리 .cke_top{border:1px solid #343434
top-line.jpg 상단 라인 .cke_chrome{display:block;border:0px solid #555;border-top:1px solid #555;padding:0;-moz-box-shadow:0 0 0px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0px rgba(0,0,0,.15);box-shadow:0 0 0px rgba(0,0,0,.15)}
ckeditor-radius.jpg

상단 툴바 모서리 

배경과 라운드

배경색

.cke_inner{display:block;-webkit-touch-callout:none;background:#ff0000;padding:0;border-radius:10px;}

모서리 바깥쪽 테두리

 

모서리 둥글게 

.cke_top{border:1px solid #0d0d0d;border-radius:10px 10px 0px 0px;padding:6px 8px 

ckeditor-bottom-radius.jpg

하단 상태바

모서리 둥글게

모서리 둥글게 border-radius 추가

.cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #222;border-radius:0px 0px 5px 10px;

image.png
본문 배경색

.cke_wysiwyg_div{background-color:#3F413F}

image.png

편집기 테두리 색

테두리 그림자

.cke_chrome{

display:block;

border:1px solid #555;

padding:0;

-moz-box-shadow:0 0 3px rgba(0,0,0,.15);

-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);

box-shadow:0 0 3px rgba(0,0,0,.15)

}

ckeditorbottom.jpg

 

편집기 하단

 

 

 

 

 

 

 

 

.cke_bottom{

padding:6px 8px 2px;

position:relative;

border-top:1px solid #000;

-moz-box-shadow:0 1px 0 #888 inset;

-webkit-box-shadow:0 1px 0 #888 inset;

box-shadow:0 1px 0 #888 inset;

background:#454545;

background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));

background-image:-moz-linear-gradient(top,#444,#222);

background-image:-webkit-linear-gradient(top,#444,#222);

background-image:-o-linear-gradient(top,#444,#222);

background-image:-ms-linear-gradient(top,#444,#222);

background-image:linear-gradient(top,#444,#222);

filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#444',endColorstr='#222')

}

 

Atachment
첨부 '7'
  • dodo 2018.02.15 10:07

    편집기 하단 일부 수정 

    .cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #151515;-moz-box-shadow:0 1px 0 #666 inset;-webkit-box-shadow:0 1px 0 #666 inset;box-shadow:0 1px 0 #666 inset;background:#404040;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#222));background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:-ms-linear-gradient(top,#444,#222);background-image:linear-gradient(top,#444,#222);filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#444',endColorstr='#222')}

  • dodo 2018.02.18 22:15

    IE용 편집기 하단 일부 수정 ( ckeditor/skins/moono-dark/editor_ie.css )

    .cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #333;border-radius:0px 0px 5px 10px;-moz-box-shadow:0 1px 0 #6a6a6a inset;-webkit-box-shadow:0 1px 0 #6a6a6a inset;box-shadow:0 1px 0 #6a6a6a inset;background:#404040;background-image:-webkit-gradient(linear,left top,left bottom,from(#3d3d3d),to(#1d1d1d));

  • dodo 2018.02.18 22:35

    편집기 상단 크롬용 일부 수정 ( ckeditor/skins/moono-dark/editor.css )

    .cke_top{border:0px solid #0d0d0d;border-radius:10px 10px 0px 0px;padding:6px 8px 2px;white-space:normal;-moz-box-shadow:0 1px 0 rgba(255,255,255,.15) inset;-webkit-box-shadow:0 1px 0 rgba(255,255,255,.15) inset;box-shadow:0 1px 0 rgba(255,255,255,.15) inset;background:#666;background-image:-webkit-gradient(linear,left top,left bottom,from(#3d3d3d),to(#1d1d1d));background-image:-moz-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-webkit-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-o-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-ms-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:linear-gradient(top,#3d3d3d,#1d1d1d);filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#3d3d3d',endColorstr='#1d1d1d')}

  • dodo 2018.02.23 19:57

    입력란 배경 투명하게 만들기 

    .cke_wysiwyg_div{background-color:#ccc;opacity:0.7;}

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

색상선택 판넬의 색상관련 정리 

ckeditor/skins/moono-dark/editor.css

.cke_colorblock,.cke_colorblock a{text-decoration:none;color:#000}span.cke_colorbox{width:10px;height:10px;border:#808080 1px solid;float:left}.cke_rtl span.cke_colorbox{float:right}a.cke_colorbox{border:#fff 1px solid;padding:2px;float:left;width:12px;height:12px}.cke_rtl a.cke_colorbox{float:right}a:hover.cke_colorbox,a:focus.cke_colorbox,a:active.cke_colorbox{border:#222 1px solid;background-color:#e5e5e5}a.cke_colorauto,a.cke_colormore{border:#fff 1px solid;padding:2px;display:block;cursor:pointer}a:hover.cke_colorauto,a:hover.cke_colormore,a:focus.cke_colorauto,a:focus.cke_colormore,a:active.cke_colorauto,a:active.cke_colormore{border:#b6b6b6 1px solid;background-color:#e5e5e5}


 

image.png

  a.cke_colorbox{border:transparent 1px solid;padding:2px;float:left;width:12px;height:12px}

  image.png

 

 

 

  a.cke_colormore{border:#CCC 1px solid;

Atachment
첨부 '2'
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

1. xe/common/js/plugins/ckeditor/ckeditor/config.js

config.toolbar = [ ]; 부분을 주석처리함 
 

//    config.toolbar = [
//     { name: 'document', items: [ 'Source', 'NewPage', 'Preview', 'Print', 'Templates' ] },
//     { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
//     { name: 'editing', items: [ 'Find', 'Replace', 'ShowBlocks', '-', 'SelectAll' ] },
//     { name: 'insert2', items: [ 'Flash', 'Html5video', 'Youtube', 'Iframe' ] },     
//     { name: 'insert0', items: [ 'Link', 'Unlink', 'Anchor' ] },
//     { name: 'forms1', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea' ] },
//     { name: 'forms2', items: [ 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
//     { name: 'basicstyles', items: [ 'CopyFormatting', 'RemoveFormat' ] },
//     { name: 'insert1', items: [ 'CreateDiv', 'Table', 'radiustable', 'Chart', 'Image' ] },
//     { name: 'wiris', items:['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry'] },     
//     { name: 'insert3', items: ['HorizontalRule', 'Smiley', 'Emojione', 'FontAwesome' ] },
//     { name: 'paragraph1', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'  ] },
//     { name: 'paragraph2', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
//     { name: 'paragraph3', items: [ 'BidiLtr', 'BidiRtl', 'lineheight', 'letterspacing' ] },
//     '/',     
//     { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'Footnotes' ] },
//     { name: 'xe_component', items: ['emoticon','image_gallery','image_link', 'poll_maker', 'soo_google_map', 'textbox', 'Maximize', 'About' ] }
//     ];

2. xe/modules/editor/skins/ckeditor/editor.html

// Initialize CKEditor settings. 부분에 아래 내용을 추가함 
 

// Initialize CKEditor settings.
var settings = {
    ckeconfig: {
        height: '{$editor_height}',
        skin: '{$colorset}',
        contentsCss: {json_encode($css_file_list)},
        xe_editor_sequence: {$editor_sequence},
        font_defaultLabel: default_font_name,
        font_names: font_list,
        fontSize_defaultLabel: default_font_size,
        fontSize_sizes: font_sizes,
        toolbarCanCollapse: true,
        allowedContent: true,
        startupFocus: {json_encode($editor_focus)},
        language: "{str_replace('jp','ja',$lang_type)}",
        toolbar: [

                { name: 'document', items: [ 'Source', 'NewPage', 'Preview', 'Print', 'Templates' ] },
                { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                { name: 'editing', items: [ 'Find', 'Replace', 'ShowBlocks', '-', 'SelectAll' ] },
                { name: 'insert2', items: [ 'Flash', 'Html5video', 'Youtube', 'Iframe' ] },     
                { name: 'insert0', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'forms1', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea' ] },
                { name: 'forms2', items: [ 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
                { name: 'basicstyles', items: [ 'CopyFormatting', 'RemoveFormat' ] },
                { name: 'insert1', items: [ 'CreateDiv', 'Table', 'radiustable', 'Chart', 'Image' ] },
                { name: 'wiris', items:['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry'] },     
                { name: 'insert3', items: ['HorizontalRule', 'Smiley', 'Emojione', 'FontAwesome' ] },
                { name: 'paragraph1', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'  ] },
                { name: 'paragraph2', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
                { name: 'paragraph3', items: [ 'BidiLtr', 'BidiRtl', 'lineheight', 'letterspacing' ] },
                '/',     
                { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'Footnotes' ] },
                { name: 'xe_component', items: ['emoticon','image_gallery','image_link', 'poll_maker', 'soo_google_map', 'textbox', 'Maximize', 'About' ]
}

        ]
            },
            loadXeComponent: true,
            enableToolbar: true,
            content_field: jQuery('[name={$editor_content_key_name}]')
        };


Angle Double Left  아래 부분이 댓글 부분임 Angle Double Right

        <!--@if($editor_toolbar === 'simple')-->
            settings.ckeconfig.toolbar = [
                { name: 'styles', items: [ 'Font', 'FontSize', '-', 'Bold', 'Italic', 'Underline', 'TextColor', 'BGColor' ] },
                { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste' ] }
            ];
        <!--@endif-->

 

  • dodo 2018.02.14 10:55

            <!--@if($editor_toolbar === 'simple')-->
                settings.ckeconfig.toolbar = [
                    { name: 'styles', items: [ 'Font', 'FontSize', '-', 'Blockquote', 'Bold', 'Underline', 'TextColor', 'BGColor' ] },
                    { name: 'insert', items: ['FontAwesome','emoticon','ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry','soo_google_map'] }
                ];
            <!--@endif-->

  • dodo 2018.02.15 08:16

    댓글 부분의 툴바를 아래로 내렸습니다. 

     

    <!--@if($editor_toolbar === 'simple')-->
    settings.ckeconfig.toolbarLocation = 'bottom';
    settings.ckeconfig.toolbar = [
                    { name: 'styles', items: [ 'Font', 'FontSize', '-', 'Blockquote', 'Bold', 'Underline', 'TextColor', 'BGColor' ] },
                    { name: 'insert', items: ['FontAwesome','emoticon','ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry','soo_google_map'] }
    ];
            <!--@endif-->

  • dodo 2018.05.03 09:16

    댓글 에디터 정렬버튼 추가 

            <!--@if($editor_toolbar === 'simple')-->
                settings.ckeconfig.toolbarLocation = 'bottom';
                settings.ckeconfig.toolbar = [
                    { name: 'styles', items: [ 'Font', 'FontSize', '-', 'Blockquote', 'Bold', 'Underline', 'TextColor', 'BGColor', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] },
                    { name: 'insert', items: ['FontAwesome','emoticon','ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry','soo_google_map','CodeSnippet'] }
                ];
            <!--@endif-->

  • dodo 2018.05.03 09:16

    Emoticon

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CKEditor 의 편집창 크기가 입력내용의 유무에 따라 자동으로 조절되는 플러그인입니다. 

 

 

설치위치> ../ckeditor/plugins/autogrow


<환경 설정> 
../ckeditor/config.js

//플러그인 등록 
config.extraPlugins = 'autogrow';

// autogrow 환경 설정 
    config.autoGrow_minHeight = 50;
    config.autoGrow_maxHeight = 600;
    config.autoGrow_bottomSpace = 0;
 

플러그인 다운로드 > autogrow_4.11.1.zip

  • dodo 2018.02.21 16:13

    크롬브라우저에서 autogrow 플러그인 적용시 한글 자모가 연결되지 못하고 이러ㅎㄱㅔ 깨지는 증상이 발견되었습니다. 
    Angle Double Right  이 문제는 해결방법을 찾지 못해 autogrow 플러그인은 포기했습니다. 

  • dodo 2018.11.15 18:50

    CKEditor 4.11.1 과 autogrow 4.11.1 버전에서 크롬부라우저에서의 한글자모가 이러ㅎㄱㅔ 깨지는 증상이 해결 되었으나 
    Internet Explorer 11 에서 한글 자모가 요ㄹㅓㅎ게 깨지는 증상이 다시 발생 하였답니다. 

    그래서 CKEditor config 파일에서 아래와 같이 브라우저를 선택하여 플러그인을 선택적으로 구동할 수 있도록 적용함. 

        if (agent.indexOf("chrome") != -1) {
            // - 크롬브라우저인 경우 
            config.extraPlugins = 'autogrow';
        } else {
            // - 크롬브라우저가 아닌 경우 autogrow 제외
            config.extraPlugins = ' ';
        }

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

 

크롬인경우 Angle Double Right   ckeditor/skins/moono-dark/editor.css

.cke_chrome{

display:block;

border:1px solid #454545;

padding:0;

-moz-box-shadow:0 0 3px rgba(0,0,0,.15);

-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);

box-shadow:0 0 3px rgba(0,0,0,.15)

}

CKEditor 전체 외곽 테두리 

ckeditor-테두리.jpg

IE 11 Angle Double Right  ckeditor/ckeditor/skins/moono-dark/editor_ie.css

.cke_chrome{

        display:block;

        border:1px solid #454545;

        padding:0;

        -moz-box-shadow:0 0 3px rgba(0,0,0,.15);

        -webkit-box-shadow:0 0 3px rgba(0,0,0,.15);

        box-shadow:0 0 3px rgba(0,0,0,.15)

}

 

Atachment
첨부 '1'
  • dodo 2018.02.15 09:44

    에디터 상단 검은라인 추가 

    .cke_chrome{display:block;border:0px solid #454545;border-top: 1px solid #151515;0 0px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0px rgba(0,0,0,.15);box-shadow:0 0 0px rgba(0,0,0,.15)}

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

목록
Board Pagination Prev 1 2 Next
/ 2
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...