FCKeditor添加一个<code>代码标签的按钮

FCKeditor本身没有一个 <code> 代码标签的按钮，但是我们在写文章时经常要插入一些代码，前面介绍过《fckeditor添加一个插入代码的功能图标》，但是那是一个插入代码的功能，html格式是：<p class=code></p> ，而非为某一小段代码添加 <code> 这个inline（内联）标签，html格式是：<code></code> 。

本文将介绍如何为FCKeditor添加一个<code>代码标签的按钮。

1、给Toolbar添加字段ComputerCode

打开 FCKeditor\fckconfig.js ，在 FCKConfig.ToolbarSets["Default"] 里添加字段“ComputerCode”，注意有的人用的是 FCKConfig.ToolbarSets["Basic"] ，我这里用的是 ["Default"] ，各人根据自身编辑器设置而定。

给Toolbar添加字段ComputerCode

2、添加 ComputerCode 样式定义

同样是在 FCKeditor\fckconfig.js ，在 FCKConfig.CoreStyles 里添加 ComputerCode 样式定义。

添加 ComputerCode 样式定义

3、添加样式 ComputerCode

打开 FCKeditor\fckstyles.xml ，添加样式 ComputerCode 。[博主按：这里不添加好像也可以]

添加样式 ComputerCode

4、设置按钮的中文提示名

打开 FCKeditor\editor\lang\zh-cn.js ，添加 ComputerCode : "代码标签", ，这个是当鼠标移到编辑器的这个按钮时，出现的中文提示。

设置按钮的中文提示名

5、设置按钮的英文提示名

打开 FCKeditor\editor\lang\en.js ，添加 ComputerCode : "Computer Code", ，这个是当鼠标移到编辑器的这个按钮时，出现的英文提示（如果你的编辑器用的是英文版）。

设置按钮的英文提示名

6、修改fckeditor的核心文件

打开 FCKeditor\editor\js\fckeditorcode_ie.js ，这个文件是fckeditor的核心文件，我们如何修改呢？

我修改的方法是完全仿照编辑器上另一按钮删除线(StrikeThrough)的标签，在 fckeditorcode_ie.js 里查找 StrikeThrough ，然后添加与之语法一样的 ComputerCode 。一共有三个位置。

▲修改（1）

▲修改（2）

▲修改（3）点击图片放大

以上是针对IE浏览器的修改，我们还要修改 FCKeditor\editor\js\fckeditorcode_gecko.js ，这是针对非IE浏览器的核心文件。修改内容是一样的。这里就不多累赘了。

7、设置完毕

至此，FCKeditor添加一个<code>代码标签的按钮就完成了。这时，我们可以在编辑器的工具条上看到多出了一个图标，我们就可以像使用粗体按钮那样使用它了。

8、添加<code>标签的样式表

在文章的css文件里，添加<code>标签的样式表，如本博使用的代码是：

code{
font-family:Monaco, Consolas, "Andale Mono","DejaVu Sans Mono", monospace;
background:#fefefe;
border:0px solid #f1f1f1;
border-radius:0px;
font-size:13px;
color:#d41faa;
padding: 3px 3px 3px 3px;
}

9、编辑器里为什么看不到样式效果？

编辑器文本区域与文章的css文件是不同的，需要分别设置。

编辑器文本区域的css文件是 FCKeditor\editor\css\fck_editorarea.css ，我们可以在此文件里设置编辑器里的文本样式。

特别注意，由于缓存，设置后是不能立即看到效果的，要想设置立即生效，需要打开 FCKeditor\fckconfig.js ，在 fck_editorarea.css 后面添加几个数字或字母，每修改css一次都要更改这个数字或字母。

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css?123' ;

相关文章推荐