记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

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

作者:Kaka    时间:2017-8-7 23:8:35    浏览:    评论:0

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

给Toolbar添加字段ComputerCode

2、添加 ComputerCode 样式定义

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

添加 ComputerCode 样式定义

添加 ComputerCode 样式定义

3、添加样式 ComputerCode

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

添加样式 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' ;

相关文章推荐

fckeditor添加一个插入代码的功能图标

标签: FCKeditor  

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: win7/win8(IIS7.5) 安装url rewrite重写模块【 附下载地址】
下一篇: url rewrite重写模块使用教程【两种使用方法】

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

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

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

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