fckeditor編輯器的工具條(toolbar)上默認(rèn)沒(méi)有“插入代碼”的功能,為了更方便的發(fā)布文章,于是我就添加了這么一個(gè)功能圖標(biāo)。如下圖所示:
“插入代碼”的圖標(biāo)
下面詳細(xì)介紹如何實(shí)現(xiàn)此功能,一共有三步。
據(jù)研究,實(shí)現(xiàn)方法與fckeditor版本有關(guān),本文方法針對(duì)的版本是2.6.2,請(qǐng)先確定你使用的版本,可以用瀏覽器打開(kāi)此文件來(lái)獲取版本號(hào):FCKeditor\editor\dialog\fck_about.html,注意不同版本的文件位置可能不同。
第一步
首先,請(qǐng)下載本文介紹的實(shí)例(點(diǎn)擊下載),解壓到 FCKeditor\editor\plugins 目錄下,如圖所示:
“插入代碼”的文件
第二步
然后,打開(kāi) FCKeditor\fckconfig.js 這個(gè)文件,在
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
下面添加一句:
FCKConfig.Plugins.Add('insertcode');
如圖:
添加“'insertcode'”插件
再在 FCKConfig.ToolbarSets["Default"] 里添加 InsertCode ,如圖:
在Toolbar顯示“'insertcode'”插件
保存文件。
第三步
最后,打開(kāi)文件 FCKeditor\editor\lang\zh-cn.js ,在后面添加一句:
InsertCodeBtn : "插入代碼"
如圖:
添加中文名稱
這句話的作用是鼠標(biāo)移到圖標(biāo)上時(shí)顯示此中文。
保存文件。
至此,fckeditor添加一個(gè)插入代碼的功能圖標(biāo)就完成了,由于緩存,可能要等一會(huì)才能在編輯器上顯示該圖標(biāo)。
“插入代碼”窗口設(shè)計(jì)
本實(shí)例“插入代碼”的窗口如圖所示:
插入代碼的窗口
這個(gè)窗口的設(shè)計(jì)來(lái)自第一步中下載的那兩個(gè)文件,各人可根據(jù)自己的需要進(jìn)行修改。
本實(shí)例“插入代碼”插入的html是這樣的:
<p class="code">窗口輸入的代碼</p>
即是為代碼的P標(biāo)簽添加一個(gè)名為code的css類(注:下載實(shí)例僅作功能演示,并沒(méi)有提供此css的樣式代碼)。
“插入代碼”的圖標(biāo)文件位置在哪
“插入代碼”的圖標(biāo)在 FCKeditor\editor\skins\default\fck_strip.gif 這個(gè)文件上選擇,可通過(guò)修改本文下載的實(shí)例文件 fckplugin.js 設(shè)置圖標(biāo)位置,如本實(shí)例用的是從上到下次序?yàn)?span style="color: #ff0000">51的圖標(biāo)。代碼如圖:
“插入代碼”的圖標(biāo)位置