技术开发 频道

FCKEditor 添加"插入代码"工具栏按钮


【IT168技术文档】

  FCKeditor是一款功能强大的开源在线文本编辑器,刚刚推出的 FCKEditor 2.5 支持IE、Firefox、safari、Oper、Netscape、Camino等等主流浏览器,支持Windows、Mac、Linux平台,支持 ASP.Net、ASP、ColdFusion 、PHP 、Java 、 Active-FoxPro、Lasso 、Perl 、Python等语言,生成的代码完全符合XHTML 1.0标准。
  本文讨论 asp.net FCKEditor 中添加"插入代码"工具栏。代码高亮组件用的是免费的 ActiproSoftware.CodeHighlighter ,该组件支持多种语言代码的着色。
  (一).添加自定义工具栏

  涉及到三组文件:
  1.fckeditor\editor\lang下的文件(这是界面多语言支持的文件夹,在此只修改英文和简体中文支持的.js文件)


  2.fckeditor\editor\js下的文件(这是多浏览器支持的文件夹,FCKEditor 核心代码。为了减少大小,该文件夹的文件已被压缩,未被压缩的文件在"fckeditor\editor\_source"中。
  fckeditorcode_gecko.js:提供"类火狐"等浏览器支持。
  fckeditorcode_ie.js:提供"类IE"等浏览器支持。
  以上文件共要改两处:
  (1).在以上文件中查找"default:if (FCKRegexLib",在default 前插入"case 'InsertCode':B = new FCKDialogCommand('InsertCode' ,FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.aspx',700,600);break"
  FCKDialogCommand()方法:
  参数1,2:按钮名称,跟前面语言支持文件中定义的对应
  参数3:点击该按钮后显示的文件
  参数4,5:弹出窗口的宽和高 



  (2).继续查找"default:alert(FCKLang.UnknownToolbarItem",在"default"前插入"case 'InsertCode':B = new FCKToolbarButton,'InsertCode', FCKLang.InsertCode,null,null,null,null,69);break;"

  最后的参数是工具栏图标的索引(FCKEditor版本不同,索引不同),图标文件fckeditor\editor\skins\ office2003\fck_strip.gif,在图片的最后增加一个16*16的图标。索引计算方法是:该图片高度除16即得到最后一个图标索引号。
  3.fckeditor\fckconfig.js

  (二).制作InsertCode.aspx 文件
0
相关文章