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

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

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

 

elFinder 의 미리보기 창 크기 변경 

quicklook : {
autoplay : true,
width    : 450,
height   : 300,
// ControlsList of HTML5 audio/video preview

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

XE 로그인 폼과 관련 있는 CSS 임

xe/modules/message/skins/xedition/css/message.css