手把手教你CKEDITOR4擴(kuò)展插件制作

本文實(shí)例講述了CKEDITOR 4 擴(kuò)展插件制作。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司溝通電話：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁(yè)制作領(lǐng)域10年，包括成都濕噴機(jī)等多個(gè)方面擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)公司，為企業(yè)錦上添花。

今天讓我們來(lái)探索一下ckeditor的擴(kuò)展功能，換句話說(shuō)就是自定義按鈕，以及點(diǎn)擊按鈕之后實(shí)現(xiàn)的功能。

要實(shí)現(xiàn)自定義按鈕，我們要做幾個(gè)事情：

• 1、準(zhǔn)備一個(gè)圖標(biāo)，最好是16*16大小的png格式圖片，你沒(méi)有的話，姜哥幫你準(zhǔn)備了一張。
• 2、在plugins目錄下建立我們和自定義插件同名的目錄，并且在里面建立一個(gè)叫plugin.js的文件。
• 3、在我們自己的插件目錄中，建立一個(gè)dialogs目錄，并且在里面新建一個(gè)與我們插件同名的js文件，實(shí)現(xiàn)插件的功能。

動(dòng)手！

1、建立相應(yīng)的文件夾和文件，姜哥在ckeditor/plugins/下新建了一個(gè)myplug目錄，將來(lái)我的插件就叫myplug

2、編輯plugin.js文件，填入以下內(nèi)容，特別要注意里面的名字前后保持一致，后期運(yùn)行有問(wèn)題，多半是名字寫(xiě)錯(cuò)了：

(function(){
 //Section 1 : 按下自定義按鈕時(shí)執(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:'打開(kāi)我的插件',
    icon: this.path + 'myplug.png',
    command:b
   });
  }
 });
})();

3、配置config.js中的toolbar，將自定義插件顯示出來(lái)：

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";這個(gè)向ckeditor注冊(cè)了我們的自定義插件，告訴ckeditor還有我們的這個(gè)myplug這么個(gè)東西；另一行是{ name: 'custome_plugin', items : [ 'myplug'] },用來(lái)配置toolbar，讓ckeditor將我們的按鈕顯示出來(lái)，注意后面的逗號(hào)，不要漏了噢。

保存之后，看一下運(yùn)行效果，圖標(biāo)出來(lái)了，可是點(diǎn)擊以后一閃而過(guò)，那是因?yàn)槲覀冞€沒(méi)有開(kāi)發(fā)對(duì)應(yīng)的dialog代碼：

注意：如果大家這一步失敗了，可以嘗試從兩個(gè)方面排查：

①、前面我一再?gòu)?qiáng)調(diào)的，名字有沒(méi)有弄錯(cuò)；
②、也許是文件編碼的問(wèn)題，嘗試把所有的中文都刪掉，換成英文試試。

4、開(kāi)發(fā)dialogs/myplug.js，實(shí)現(xiàn)業(yè)務(wù)功能

在myplug/dialogs/新建一個(gè)叫myplug.js的文件，這個(gè)其實(shí)和前面一步中，plugin.js文件中的這一行是對(duì)應(yīng)的：

CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字

在那個(gè)文件中，其實(shí)指定了我們dialog文件的目錄和文件名，理論上是可以隨意的，但是為了容易管理，墻裂建議大家搞成一樣的，不要給自己制造麻煩~來(lái)看一下，我們要在myplug.js里寫(xiě)什么：

(function () {
  function myplugDialog(editor) {
  return {
   title: 'Who does you want to say hello?', //窗口標(biāo)題
   minWidth: 300,
   minHeight: 80,
   buttons: [{
    type: 'button',
    id: 'someButtonID',
    label: 'Button',
    onClick: function () {
     alert('This is a custome button');
    }
    //對(duì)話框底部的自定義按鈕
   },
   CKEDITOR.dialog.okButton, //對(duì)話框底部的確定按鈕
   CKEDITOR.dialog.cancelButton], //對(duì)話框底部的取消按鈕
   contents:      //每一個(gè)contents在對(duì)話框中都是一個(gè)tab頁(yè)
   [
    {
     id: 'user',   //contents的id
     label: 'You name',
     title: 'You name',
     elements:    //定義contents中的內(nèi)容，我們這里放一個(gè)文本框，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 () {
    //點(diǎn)擊 確定 按鈕之后觸發(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);
 });
})();

在上面這段程序里，我們首先定義了一個(gè)myplugDialog，并且給他設(shè)置了標(biāo)題、最小寬度、最小高度，然后又添加了一個(gè)tab頁(yè)，在里面放了一個(gè)對(duì)話框。在程序的底部，我們把這個(gè)對(duì)話框注冊(cè)到ckeditor中去，這樣前端點(diǎn)擊按鈕，才可以調(diào)用到這個(gè)對(duì)話框。

常見(jiàn)錯(cuò)誤：

1、名字沒(méi)有匹配，再次強(qiáng)調(diào)一下，這里面myplugDialog千萬(wàn)千萬(wàn)要前后一致，而且，要和plugin.js中的名稱(chēng)一致！

2、中文的問(wèn)題，如果出現(xiàn)點(diǎn)擊沒(méi)有效果，大家可以首先嘗試，將我這段代碼中，所有的中文都刪掉試試?；蛘哂昧硗獾姆椒?，轉(zhuǎn)換一下編碼格式，在Notepad++中，可以這樣：

用我標(biāo)紅的兩個(gè)選項(xiàng)試試看，一般都是可以的，重新保存之后，再次運(yùn)行：

點(diǎn)擊我們的插件后，出來(lái)一個(gè)對(duì)話框，填入我的名字，姜哥，再按確定。

我們填入的內(nèi)容就被插入到當(dāng)前光標(biāo)處了！

好了，今天我們學(xué)習(xí)了ckeditor的自定義插件，以及插件中內(nèi)容的交互。內(nèi)容還是比較多的，大家也可能會(huì)碰到各種問(wèn)題，姜哥再這里再?lài)Z叨兩句，問(wèn)題一般都是兩種原因引起的：

①、名稱(chēng)前后不一致；
②、中文編碼格式引起的亂碼。

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

當(dāng)前標(biāo)題：手把手教你CKEDITOR4擴(kuò)展插件制作
轉(zhuǎn)載源于：http://muchs.cn/article40/ihgoeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、建站公司、企業(yè)網(wǎng)站制作、做網(wǎng)站、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)