記憶盒子

把記憶裝進(jìn)灰色的盒子,封裝起來(lái),那年那月,重新拾起。

首頁(yè)搜索目錄
search
當(dāng)前主題: 互聯(lián)網(wǎng)絡(luò)

fckeditor添加一個(gè)插入代碼的功能圖標(biāo)

作者:Kaka    時(shí)間:2017-3-23 23:29:26    瀏覽:    評(píng)論:0

fckeditor編輯器的工具條(toolbar)上默認(rèn)沒(méi)有“插入代碼”的功能,為了更方便的發(fā)布文章,于是我就添加了這么一個(gè)功能圖標(biāo)。如下圖所示:

“插入代碼”的圖標(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'”插件

添加“'insertcode'”插件

再在 FCKConfig.ToolbarSets["Default"]  里添加 InsertCode ,如圖:

在Toolbar顯示“'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)位置

“插入代碼”的圖標(biāo)位置

x

標(biāo)簽: FCKeditor  

※ 網(wǎng)站速度慢?試試網(wǎng)站自動(dòng)優(yōu)化工具 ※

上一篇: WordPress速度慢?試試Wp Super Cache緩存插件
下一篇: 判斷WP Super Cache是否緩存成功的兩個(gè)方法

發(fā)表評(píng)論:

◎歡迎參與討論,請(qǐng)?jiān)谶@里發(fā)表您的看法、交流您的觀點(diǎn)。

訂閱博客                   QQ交流群(312716741)

  • 通過(guò)Google訂閱本站 通過(guò)鮮果訂閱本站 通過(guò)抓蝦訂閱本站
  • 通過(guò)QQ郵箱訂閱本站 通過(guò)Yahoo訂閱本站 通過(guò)有道訂閱本站

Search

最新評(píng)論及回復(fù)

最近留言

網(wǎng)站分類

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粵ICP備14028160號(hào)-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.