Ckeditor Add-Ons 중에 Simplebutton 의 기능을 확장하여 아래와 같이 글씨색, 테두리색, 배경색, 템플릿 등을 설정할수 있도록 개선하였습니다. 

Button Normal  Button gray  Button halfmirror  Button shiny  Button Glossy  Button lady

다양한 버튼 샘플 링크  다양한 버튼 샘플을 볼수 있는 링크로 연결해 드립니다. 

여기도 재미잇는 버튼 샘플이     깔끔안 디자인 버튼

Templates 플러그인에서 템플릿을 선택하면 한순간에 모든 내용이 템플릿으로 전부 대체되어 난감할 수 있음

그래서 템플릿 다이알로그에서 기본 값을 체크해제 해 두고, 필요시에만 체크할 수 있도록 변경

{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"default":n.templates_replaceContent}

아래 처럼 default 값을 해제함

{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"":n.templates_replaceContent}

크롬에서는 포기

Internet Explorer 11 에서 보안 설정에 따라 이미지 업로드가 되는 것을 확인 함.

1. imgur 플러그인이 적용된 도메인을 [신뢰할 수 있는 사이트]에 넣어 줍니다.
   *.imgur.com 도 같이 넣어 줍니다.
2. [신뢰할 수 있는 사이트] 의 보안 설정{=사용자 지정 수준}에서 □ 도메인 간의 데이터 원본 액세스 항목의 값을 ◎ 사용 으로 설정합니다.
   
   

최대화를 기본으로 웹브라우저화면에 꽉차게 열어보기.

CKEDITOR.replace('ckeditor',
    { customConfig : 'config.js', 
      width: '100%',
      height: '360', });

CKEDITOR.on('instanceReady',function( evt ){
     var editor = evt.editor;
     editor.execCommand('maximize');
});

 

1. CKEditor 를 다운 받을 때 최적화된 코드로 다운받으면 코드 해석이 어렵게 됨. 최적화된 코드를 기준으로 추가된 항목을 확인하면 아래와 같다.    xe/..../ckeditor/config.js

(function(){CKEDITOR.plugins.add("btgrid",{lang:"en,ru,fr,nl",requires:"widget,dialog",icons:"btgrid",init:function(b){var f=b.lang.btgrid;CKEDITOR.dialog.add("btgrid",this.path+"dialogs/btgrid.js");b.addContentsCss(this.path+"styles/editor.css");b.ui.addButton("btgrid",{label:f.createBtGrid,command:"btgrid",icon:this.path+"icons/btgrid.png"});b.widgets.add("btgrid",{allowedContent:"div(!btgrid);div(!row,!row-*);div(!col-*-*);div(!content)",requiredContent:"div(btgrid)",parts:{btgrid:"div.btgrid"},
editables:{content:""},template:'\x3cdiv class\x3d"btgrid"\x3e\x3c/div\x3e',dialog:"btgrid",defaults:{},upcast:function(a){return"div"==a.name&&a.hasClass("btgrid")},init:function(){var a=1,e=this.element.getChildCount();for(a;a<=e;a++)this.createEditable(12,a)},data:function(){if(this.data.colCount&&1>this.element.getChildCount())for(var a=this.data.colCount,e=this.data.rowCount,h=this.data.rowHeight,c=this.parts.btgrid,d=1;d<=e;d++)this.createGrid(a,c,d,h)},createGrid:function(a,e,c,h){for(var d='\x3cdiv class\x3d"row row-'+
c+'"\x3e',b=1;b<=a;b++)d=d+'\x3cdiv class\x3d"col col-md-'+12/a+'"\x3e  \x3cdiv class\x3d"content" style="min-height:'+h+'em;"\x3e    \x3cp\x3eCol '+b+" content area\x3c/p\x3e  \x3c/div\x3e\x3c/div\x3e";e.appendHtml(d+"\x3c/div\x3e");this.createEditable(a,c)},createEditable:function(a,b){for(var c=1;c<=a;c++)this.initEditable("content"+b+c,{selector:".row-"+b+" \x3e div:nth-child("+c+") div.content"})}})}})})();

2. btgrid 플러그인 수정  ckeditor/plugins/btgrid/dialogs/btgrid.js

CKEDITOR.dialog.add("btgrid",function(d){function c(a){return function(){var b=this.getValue();(b=!!(CKEDITOR.dialog.validate.integer()(b)&&0<b))||alert(a);return b}}var b=d.lang.btgrid;return{title:b.editBtGrid,minWidth:240,minHeight:120,onShow:function(){var a=d.getSelection();a.getRanges();var b=this.getName(),c=this.getContentElement("info","rowCount"),e=this.getContentElement("info","colCount"),h=this.getContentElement("info","rowHeight");"btgrid"==b&&(a=a.getSelectedElement())&&(this.setupContent(a),c&&c.disable(),e&&e.disable())},contents:[{id:"info",
label:b.infoTab,accessKey:"I",elements:[{id:"colCount",type:"select",required:!0,label:b.selNumCols,items:[["2",2],["3",3],["4",4],["6",6],["12",12]],validate:c(b.numColsError),setup:function(a){this.setValue(a.data.colCount)},commit:function(a){a.setData("colCount",this.getValue())}},{id:"rowCount",type:"number",width:"50px",required:!0,label:b.genNrRows,validate:c(b.numRowsError),setup:function(a){this.setValue(a.data.rowCount)},commit:function(a){a.setData("rowCount",this.getValue())}},
{id:"rowHeight",type:"number",width:"50px",label:"줄높이입력",setup:function(a){this.setValue(a.data.rowHeight)},commit:function(a){a.setData("rowHeight",this.getValue())}}
]}]}});

 

CKeditor 의 Plugins 의 Dialog 상자 안에서  개별 field 요소(입력폼)의 값 변경시 다른 fields 요소(입력폼)에 영향을 끼쳐 원하는 값을 입력할 수 있도록 하는 방법입니다. - 아 설명이 이게 맞나? 아무튼 아래 그림으로 설명합니다. 

위 이미지와 같이 하나의 입력 field 를 수정하면 다른 입력 field 도 같이 바뀌는 거죠. 

{
  type: 'number',
  id: 'input-all',
  label: '일괄적용',
  onChange: function() {
      this.getDialog().setValueOf("탭id", "input-왼쪽위", this.getValue());
      this.getDialog().setValueOf("탭id", "input-오른쪽위", this.getValue());
      this.getDialog().setValueOf("탭id", "input-왼쪽아래", this.getValue());
      this.getDialog().setValueOf("탭id", "input-오른쪽아래", this.getValue());
   }
}

Bootstrap grid

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

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');

    

    

<예시>
 

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

CKEditor 스타일 리스트에 스타일 추가하기 

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'
        }
    },
] );

spacingsliders  for ckeditor

다운로드> 여기클릭

설치 위치
> ckeditor/plugins/spacingsliders

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

CKEditor Plugins <Hkemoji>

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

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

[환경 설정]

ckeditor/config.js

config.extraPlugins = 'hkemoji';

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

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

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

 하이구야 

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

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

File Uploader by Uploadcare

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

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

 [설정 방법]

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 */
     },

   }

다운로드 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' ] }
]

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

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; }

 

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

툴바 관리자에게만 보이게 

https://xetown.com/qna/773148

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

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

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'}]});

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'            
        }
    },