|
CKEditor是一個(gè)非常優(yōu)秀的在線編輯器，它的前身就是FCKEditor，CKEditor據(jù)官方說是重寫了內(nèi)核的，但功能和性能比FCKEditor更為強(qiáng)大和優(yōu)越。記得07年的時(shí)候第一次接觸FCKEditor，那時(shí)候花了一天時(shí)間研究如何在它基礎(chǔ)上增加一個(gè)自定義插件，可以參考這里http://j2ee.blog.sohu.com/36813753.html，但過程比較復(fù)雜和麻煩。其實(shí)CKEditor提供了非常方便的可擴(kuò)展的插件體系，用戶通過它的擴(kuò)展插件體系就可以非常方便的增加自定義插件，我這里簡(jiǎn)單的給出一個(gè)完整的插件示范。 先到http:///這里下載最新版本的CKEditor，我下載的是3.3.1版，大概有2M左右，包含了全部源碼和測(cè)試用例。下載完畢后，解壓到硬盤，假設(shè)CKEditor解壓后的目錄是${ckeditor}，下面提到的都是用這個(gè)進(jìn)行替代。下面就開始一步步制作屬于我們自己的插件了。 一、創(chuàng)建插件目錄結(jié)構(gòu)1、進(jìn)入到${ckeditor}\plugins目錄下，創(chuàng)建目錄helloworld，這個(gè)目錄名稱就是我們的插件名稱 2、在helloworld目錄下分別建立三個(gè)目錄：dialogs、images、lang 二、編寫插件文件每個(gè)插件都會(huì)有一個(gè)plugin.js的插件文件存在于插件目錄的根目錄下，一般使用CKEditor提供的API來進(jìn)行插件的動(dòng)態(tài)增加。首先，我們?cè)?span style="margin: 0px; padding: 0px; color: rgb(178, 34, 34);">helloworld目錄下建立plugin.js文件，使用utf-8存儲(chǔ)，該文件的內(nèi)容如下：
三、插件的對(duì)話框 我們?cè)谏厦娴牟寮募袑懥艘粋€(gè)requires: ['dialog']，表示當(dāng)點(diǎn)擊工具欄上的插件圖標(biāo)時(shí)會(huì)調(diào)用一個(gè)對(duì)話框來進(jìn)行處理。我們先在helloworld\dialogs目錄下建立一個(gè)helloworld.js文件，使用utf-8保存，內(nèi)容如下：
四、插件的語言文件支持CKEditor本身就是支持i18n的，因此我們可以為插件定義多種語言，這樣可以適應(yīng)更多的場(chǎng)合。進(jìn)入helloworld\lang目錄，在這個(gè)目錄下建立en.js和zh-cn.js兩個(gè)文件，分別用來支持中文和英文，內(nèi)容分別如下：
這里定義的語言都是我們?cè)诓寮惺褂玫降淖兞浚话阍诓寮募械氖褂檬?span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">editor.lang.propName，其中editor是當(dāng)前的編輯器實(shí)體變量，插件一般都會(huì)傳遞的，propName是我們?cè)谡Z言文件中定義的屬性名稱，比如這里的tbTip等。 五、插件的圖片指定我們其實(shí)在第二步編寫插件文件中中已經(jīng)指定了插件的圖片文件：icon: this.path + ‘images/hello.png’。這里的icon指的就是在編輯器工具欄上顯示的圖標(biāo)，我們這里找一個(gè)16×16大小的png圖片，命名為hello.png，然后放到helloworld\images目錄下即可。 六、演示驗(yàn)證插件完成上面5個(gè)步驟后，插件基本上就已經(jīng)完成了。為了能夠使插件可以出現(xiàn)在編輯器的工具欄中，我們還需要做如下配置： 1、打開${ckeditor}\config.js文件，修改內(nèi)容為如下：
其中config.extraPlugins這行是關(guān)鍵，表明這個(gè)是我們編寫的額外插件，需要集成到CKEditor中去。這個(gè)僅僅是注冊(cè)而已，如果需要顯示在工具欄中，還要定義一個(gè)toolbar，比如我們這里定義了一個(gè)MyBasic的toolbar，并且只選取了CKEditor中最常用的幾個(gè)工具，然后最后我們?cè)黾恿薶elloworld的插件，這樣我們就把剛才編寫的插件注冊(cè)到MyBasic的toolbar中了。 2、寫一個(gè)demo.html文件進(jìn)行測(cè)試 我們?cè)?{ckeditor}根目錄下建立一個(gè)demo.html文件來測(cè)試下我們剛寫的插件是否有效，內(nèi)容如下：
然后在瀏覽器中打開demo.html文件，就可以看到在編輯器的工具欄中最后一個(gè)就是我們剛寫的插件了，如下圖所示：
七、插件包下載和部署上面演示效果的完整插件包可以從這里下載，將插件包下載后，安裝如下方式進(jìn)行部署： 1、解壓插件包，將helloworld目錄整個(gè)復(fù)制到${ckeditor}\plugins目錄下； 2、將demo.html文件復(fù)制到${ckeditor}根目錄下； 3、將第六步中的修改config.js文件內(nèi)容替換掉${ckeditor}\config.js文件的內(nèi)容； 4、完成后，在瀏覽器中運(yùn)行demo.html文件即可看到效果 |
|
|
