本文實例講述了CKEDITOR 4 擴展插件制作。分享給大家供大家參考，具體如下：
今天讓我們來探索一下ckeditor的擴展功能，換句話說就是自定義按鈕，以及點擊按鈕之后實現(xiàn)的功能。
要實現(xiàn)自定義按鈕，我們要做幾個事情：
。plugins目錄下建立我們和自定義插件同名的目錄，并且在里面建立一個叫plugin.js的文件。動手！
1、建立相應的文件夾和文件，姜哥在ckeditor/plugins/下新建了一個myplug目錄，將來我的插件就叫myplug
2、編輯plugin.js文件，填入以下內(nèi)容，特別要注意里面的名字前后保持一致，后期運行有問題，多半是名字寫錯了：
(function(){ //Section 1 : 按下自定義按鈕時執(zhí)行的代碼 var a= { exec:function(editor){ alert("This a custome button!"); } }, //Section 2 : 創(chuàng)建自定義按鈕、綁定方法 b='myplug'; //注意myplug名字 CKEDITOR.plugins.add(b,{ init:function(editor){ CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字 editor.addCommand('myplug', new CKEDITOR.dialogCommand('myplugDialog')); //注意myplug名字 //注意myplug名字 和 圖片路徑 editor.ui.addButton('myplug',{ label:'打開我的插件', icon: this.path + 'myplug.png', command:b }); } });})();3、配置config.js中的toolbar，將自定義插件顯示出來：
CKEDITOR.editorConfig = function( config ) { config.extraPlugins="myplug"; //增加了我們的自定義插件 config.toolbar = 'Full'; config.toolbar_Full = [ { name: 'custome_plugin', items : [ 'myplug'] }, //將自定義插件加入toolbar { name: 'insert', items : [ 'upload','album','-','Table' ] }, { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','-','Blockquote', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] }, { name: 'colors', items : [ 'TextColor','BGColor' ] }, { name: 'document', items : [ 'Source' ] }, ];}; 在這里我們只加了兩行，一行是config.extraPlugins="myplug";這個向ckeditor注冊了我們的自定義插件，告訴ckeditor還有我們的這個myplug這么個東西；另一行是{ name: 'custome_plugin', items : [ 'myplug'] },用來配置toolbar，讓ckeditor將我們的按鈕顯示出來，注意后面的逗號，不要漏了噢。
保存之后，看一下運行效果，圖標出來了，可是點擊以后一閃而過，那是因為我們還沒有開發(fā)對應的dialog代碼：
注意：如果大家這一步失敗了，可以嘗試從兩個方面排查：
①、前面我一再強調(diào)的，名字有沒有弄錯；
②、也許是文件編碼的問題，嘗試把所有的中文都刪掉，換成英文試試。
4、開發(fā)dialogs/myplug.js，實現(xiàn)業(yè)務功能
在myplug/dialogs/新建一個叫myplug.js的文件，這個其實和前面一步中，plugin.js文件中的這一行是對應的：
CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字 在那個文件中，其實指定了我們dialog文件的目錄和文件名，理論上是可以隨意的，但是為了容易管理，墻裂建議大家搞成一樣的，不要給自己制造麻煩~來看一下，我們要在myplug.js里寫什么：
(function () { function myplugDialog(editor) { return { title: 'Who does you want to say hello?', //窗口標題 minWidth: 300, minHeight: 80, buttons: [{ type: 'button', id: 'someButtonID', label: 'Button', onClick: function () { alert('This is a custome button'); } //對話框底部的自定義按鈕 }, CKEDITOR.dialog.okButton, //對話框底部的確定按鈕 CKEDITOR.dialog.cancelButton], //對話框底部的取消按鈕 contents: //每一個contents在對話框中都是一個tab頁 [ { id: 'user', //contents的id label: 'You name', title: 'You name', elements: //定義contents中的內(nèi)容，我們這里放一個文本框，id是name [ { id: 'name', type: 'text', style: 'width: 50%;', label: 'You name', } ] } ], onLoad: function () { //alert('onLoad'); }, onShow: function () { //alert('onShow'); }, onHide: function () { //alert('onHide'); }, onOk: function () { //點擊 確定 按鈕之后觸發(fā)的事件 var name = this.getValueOf( 'user', 'name' ); //從界面上取值的方法，getValueOf( 'contents的id', '控件的id' ) editor.insertHtml('<p>' + name + ' : Hello world!' + '</p>'); //將內(nèi)容放入到editor this.commitContent(); }, onCancel: function () { //alert('onCancel'); }, resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT }; } CKEDITOR.dialog.add('myplugDialog', function (editor) { return myplugDialog(editor); });})(); 在上面這段程序里，我們首先定義了一個myplugDialog，并且給他設置了標題、最小寬度、最小高度，然后又添加了一個tab頁，在里面放了一個對話框。在程序的底部，我們把這個對話框注冊到ckeditor中去，這樣前端點擊按鈕，才可以調(diào)用到這個對話框。
常見錯誤：
1、名字沒有匹配，再次強調(diào)一下，這里面myplugDialog千萬千萬要前后一致，而且，要和plugin.js中的名稱一致！
2、中文的問題，如果出現(xiàn)點擊沒有效果，大家可以首先嘗試，將我這段代碼中，所有的中文都刪掉試試。或者用另外的方法，轉(zhuǎn)換一下編碼格式，在Notepad++中，可以這樣：
用我標紅的兩個選項試試看，一般都是可以的，重新保存之后，再次運行：
點擊我們的插件后，出來一個對話框，填入我的名字，姜哥，再按確定。
我們填入的內(nèi)容就被插入到當前光標處了！
好了，今天我們學習了ckeditor的自定義插件，以及插件中內(nèi)容的交互。內(nèi)容還是比較多的，大家也可能會碰到各種問題，姜哥再這里再嘮叨兩句，問題一般都是兩種原因引起的：
①、名稱前后不一致；
②、中文編碼格式引起的亂碼。
完整實例代碼點擊此處本站下載。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
