1、下載ckeditor,我這里下載的是CKEditor 3.6.2。
2、里邊有壓縮過的代碼及源碼，源碼所在目錄為_source，還有一些使用例子，具體不做累述
此處主要講的是在使用過程需要添加自定義按鈕。
2. 比如我要添加“插入代碼”的按鈕，起名為code。在ckeditor/plugins下新建文件夾code，在code文件夾里加入一個小圖片如code.gif，然后在code文件夾里新建plugin.js文件，內容如下：
//一鍵排版
(function () {
b = 'format_wz';
CKEDITOR.plugins.add(b, {
requires: ['styles', 'button'],
init: function (a) {
a.addCommand(b, CKEDITOR.plugins.autoformat.commands.autoformat);
a.ui.addButton('format_wz', {
label: "一鍵排版",
command: 'format_wz',
icon: this.path + "format_wz.png"
});
}
});
CKEDITOR.plugins.autoformat = {
commands: {
autoformat: {
exec: function (editor) {
formatText(editor);
}
}
}
}；
//執行的方法
function formatText(editor) {
var myeditor = editor;
//得到要編輯的源代碼
var editorhtml = myeditor.getData();
//在這里執行你的操作。。。。。
editorhtml= editorhtml.replace(/(<\/?(?!br|p|img|a|h1|h2|h3|h4|h5|h6)[^>\/]*)\/?>/gi,'');
//在p標簽處添加樣式，使每個段落自動縮進兩個字符
editorhtml= editorhtml.replace(/\<[p|P]>/g,"<p style='text-indent: 2em'>");
//再將內容放回到編輯器中
editor.setData(html);
}
})();
3. 修改config.js來注冊code插件。用如下代碼替換config.js原來內容：
CKEDITOR.editorConfig = function( config ) {
//配置CKFinder
config.extraPlugins = "code,uploadImg";
//新建插件 config.toolbar_temp = [
{ name: 'document', items: ['code','format_wz', 'Save'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] } ];
config.toolbar_Full = [
{ name: 'document', items: ['code', 'Source','-','format_wz','-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] } ];
};
注意我的CKEditor配置都是通過修改config.js來完成
4. 安裝CKEditor，在要引入CKEditor的頁面中script標簽內添加如下js代碼：
var editor=CKEDITOR.replace('p_Content_content',{
fullPage: true,
extraPlugins: 'uploadImg,format_wz,docprops'
});
CKFinder.setupCKEditor(editor, 'ckfinder');
5.刷新頁面，就能看到自己后添加的按鈕了。