1.自定義界面
ckeditor默認使用moono皮膚
如果想更改ckeditor的皮膚，去ckeditor的網站下載相應的皮膚。
皮膚更換
去ckeditor的關網選一個你喜歡的皮膚，然后下載下來。
http://ckeditor.com/addons/skins/all
以bootstrap為例，點擊Download進行下載
根據提示信息，將下載的文件進行解壓，並放在項目中ckeditor目錄的skins目錄下
然后配置config.js，使其引用bootstrap的皮膚
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.skin = 'bootstrapck';
};
如果想使用其他的皮膚，跟上面的操作一樣，只需把config.skin = 'bootstrapck';換成下載的那個即可
界面選擇
ckeditor的samples目錄下提供了一個示例，點擊TOOLBAR CONFIGURATOR就可以自定義界面了
進入界面選擇和排序頁面
得到自定義界面的js
將其拷貝到config.js中，注意保存自己之前的配置（皮膚，高度等）
隱藏按鈕
ckeditor與ckfinder整合之后再進行圖文混排的時候選擇圖片時可以瀏覽服務器上的圖片資源
用戶可以刪除，重命名，這也會影響到其他頁面對該圖片的引用，不安全。
可以將瀏覽服務器按鈕隱藏了。
在選擇圖片的時候有兩處有瀏覽服務器的按鈕:
所以需要修改兩處
打開ckeditor/plugins/image/dialogs/下的image.js
查找browseServer，找到第一次出現的位置
label:d.lang.common.browseServer,hidden:!0,
修改其為:
label:d.lang.common.browseServer,style:"display:none",hidden:!0,
第一個瀏覽服務器按鈕就被隱藏了
再搜索image.js，搜索filebrowser
url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right",hidden:!0,將其改為
url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right;display:none",hidden:!0,
這樣兩個瀏覽服務器的按鈕就被隱藏了，用戶只能每次上傳圖片來進行圖文混排。
界面元素操作
ckeditor為界面提供了許多按鈕，有源代碼，保存，新建，打印等等。
有時候我們需要自己操作這些按鈕的事件。ckeditor也為我們提供了相應的api
api網址: http://docs.cksource.com/ckeditor_api/index.html
獲取元素
以保存按鈕為例
/**
* index.jsp的js
*/
// When the CKEDITOR instance is created, fully initialized and ready for interaction.
// 當id為content的那個ckeditor被創建，並初始化完成之后
CKEDITOR.instances["content"].on("instanceReady", function() {
// 保存按鈕
this.addCommand("save", {
modes : {
wysiwyg : 1,
source : 1
},
exec : function(editor) {
save();
}
});
});
});
// 保存方法
function save() {
// 獲取到editor中的內容
var content = editor.document.getBody().getHtml();
alert(content);
}
打印按鈕的事件
this.addCommand("print", {
modes : {
wysiwyg : 1,
source : 1
},
exec : function(editor) {
alert("print button");
}
});
操作事件
除了可以獲取按鈕的事件外，還能獲取整個editor的點擊，失去焦點等事件。
eg:
用戶進入編輯頁面，ckeditor顯示提示信息，當用戶點擊進行輸入的時候提示信息消失，如果用戶什么也沒有輸入，失去焦點時提示信息重新出現，如果用戶輸入了，不出現提示信息。
// 失去焦點
this.on('blur', addTips);
// 獲得焦點
this.on('focus', deleteTips);
/*
* 點擊時清除提示信息
*/
function deleteTips() {
console.log("focus");
var tips = editor.document.getBody().getText().trim();
//console.log("tips: " + tips);
var mytip = "如果想讓圖片居中，請先選擇居中，然后再插入圖片!".trim();
//console.log("mytip: " + mytip);
//console.log(tips == mytip);
if (tips == mytip) {
CKEDITOR.instances['content'].setData('');
}
}
/*
* 如果沒有輸入，失去焦點時給出提示信息
*/
function addTips() {
console.log("blur");
var tips = editor.document.getBody().getText().trim();
//console.log("tips: " + tips);
var mytip = "如果想讓圖片居中，請先選擇居中，然后再插入圖片!".trim();
//console.log("mytip: " + mytip);
//console.log(tips == mytip);
if (tips.length==0) {
CKEDITOR.instances['content'].setData(mytip);
}
}
【參考文獻】
【1】http://blog.csdn.net/frankcheng5143/article/details/50946142
【2】http://blog.csdn.net/woshirongshaolin/article/details/8240542