手把手教你 CKEDITOR 4 擴展插件制作
本文實例講述了CKEDITOR 4 擴展插件制作。分享給大家供大家參考,具體如下:
今天讓我們來探索一下ckeditor的擴展功能,換句話說就是自定義按鈕,以及點擊按鈕之后實現(xiàn)的功能。
要實現(xiàn)自定義按鈕,我們要做幾個事情:
- 1、準備一個圖標,最好是16*16大小的png格式圖片,你沒有的話,姜哥幫你準備了一張
。 - 2、在
plugins目錄下建立我們和自定義插件同名的目錄,并且在里面建立一個叫plugin.js的文件。 - 3、在我們自己的插件目錄中,建立一個dialogs目錄,并且在里面新建一個與我們插件同名的js文件,實現(xiàn)插件的功能。
動手!
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)點擊沒有效果,大家可以首先嘗試,將我這段代碼中,所有的中文都刪掉試試?;蛘哂昧硗獾姆椒?,轉換一下編碼格式,在Notepad++中,可以這樣:

用我標紅的兩個選項試試看,一般都是可以的,重新保存之后,再次運行:

點擊我們的插件后,出來一個對話框,填入我的名字,姜哥,再按確定。

我們填入的內(nèi)容就被插入到當前光標處了!
好了,今天我們學習了ckeditor的自定義插件,以及插件中內(nèi)容的交互。內(nèi)容還是比較多的,大家也可能會碰到各種問題,姜哥再這里再嘮叨兩句,問題一般都是兩種原因引起的:
①、名稱前后不一致;
②、中文編碼格式引起的亂碼。
完整實例代碼點擊此處本站下載。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript操作XML文件技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- FCKeditor .NET的配置、擴展與安全性經(jīng)驗交流
- FCKeditor 插件開發(fā) 示例(詳細版本)
- ckeditor自定義插件使用方法詳解
- CKEditor 附插入代碼的插件
- 添加FCKeditor插件需要注意的地方
- fckeditor 修改記錄添加行距功能插件
- ckeditor插件開發(fā)簡單實例
- fckeditor 插件實例 制作步驟
- fckeditor 插件開發(fā)參考文檔
- CKEditor中加入syntaxhighlighter代碼高亮插件
- CKEDITOR二次開發(fā)之插件開發(fā)方法
- CKEditor擴展插件:自動排版功能autoformat插件實現(xiàn)方法詳解
相關文章
thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
這篇文章主要介紹了thinkphp中常用的系統(tǒng)常量和變量,需要的朋友可以參考下2014-03-03
JS判斷元素是否在數(shù)組內(nèi)的實現(xiàn)代碼
這篇文章主要介紹了JS判斷元素是否在數(shù)組內(nèi)的實現(xiàn)代碼,需要的朋友可以參考下2016-03-03
JavaScript 函數(shù)的定義-調(diào)用、注意事項
這篇文章主要介紹了JavaScript 函數(shù)的定義-調(diào)用、注意事項,需要的朋友可以參考下2017-04-04
前端JavaScript實現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁加載速度和用戶體驗,本文將詳細介紹從基礎到高級的各種JavaScript壓縮優(yōu)化技術,小伙伴可以根據(jù)需求進行選擇2025-04-04

