实战FCKeditor，添加自定义工具栏---插入代码（一）

在此文开始以前，本人用了一天时间研究了在FCKeditor中添加自定义工具栏（咋感受本身比较笨呢？）。以前，网上有不少人也在找这样的资料，可是都没有详细说明。终于，偶然状况下，发现了两位高人的BLOG中有说起怎样添加自定义工具栏，可是没有插入代码这功能的代码。不过，站在巨人肩膀上就是爽啊，慢慢改。

 

  文章开始前，把两位达人的BLOG先发出来：

 

清清泡泡：[url]http://j2ee.blog.sohu.com/36813753.html[/url]（详细讲解了如何添加自定义工具栏，但是不少都是不须要的步骤）
幻想曲： [url]http://www.lemongtree.com/Archives/fckedit_toolbar.aspx[/url]
[url]http://www.lemongtree.com/Archives/fckeditor_toolbar_2.aspx[/url] （只给了源码没说明，= =！源码地址在16楼的回复里）

 

另外，插入代码功能的JS脚本是用了 月伤 melody  制做的双鱼文本编辑器 PiscesTextEditor V1.0中的脚本，要特别感谢！

做品连接：[url]http://www.2fstory.net/blog/View.aspx?blogID=47[/url]       

 

首先，打开fckeditor下的fckconfig.js文件，找到FCKConfig.ToolbarSets["Default"]和FCKConfig.ContextMenu 在他们后面加上”InsertCode”，这个固然是本身要添加的工具栏的名字了。而后，咱们在“fckeditor\editor\lang\”文件夹下找到zh-cn.js，在最后一行后面加上如下2句：

//自定义

InsertCode:"插入代码",

InsertCodeProp:"插入代码属性"

注意在这2句前DlgAboutInfo      : "要得到更多信息请访问 "后面加个逗号。固然，还能够一样方法修改其余语言js文件，我就修改了繁体的zh.js和英文的en.js

 

    如今，咱们已经定义了工具栏，开始第二大步，打开“fckeditor\editor\js\”下的fckeditorcode_gecko.js和fckeditorcode_ie.js，咱们开始注册工具栏；

第一步：在2个文件中搜索“InsertHorizontalRule”，在后面加上“InsertCode”。

第二步：一样在2个文件中搜索“default:if (FCKRegexLib”，在“default”以前加上这么一句：

Case 'InsertCode':B = new FCKDialogCommand('InsertCode' , FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.htm',510,450);break;

这句话意思就是，点击工具栏图标时打开InsertCode.htm文件，定义了高和宽，至于文件内容咱们以后再说。

第三步：仍是在这2个文件，搜索“default:alert(FCKLang.UnknownToolbarItem”，在“default”以前加上下面一句：

case 'InsertCode':B = new FCKToolbarButton('InsertCode' , FCKLang.InsertCode,null,null,null,null,67);

        这句话意思是定义了工具栏的图标，FCKeditor的默认图标文件是“fckeditor\editor\skins\default\”下的fck_strip.gif图片，本人因为不想用重复的默认图标，所以加了一个小图片:

（20*20）

默认图片是16*2056，用PS把画布加长到16*2072，再把本身的小图片放到最下面，这样，自定义的图片恰好排67位。之后加新功能还能够依次增长此图片。

好了。通过这么3步，咱们已经把自定义工具栏加上去了。（在about以后，若是想加在中间，能够在刚才的第二和第三步里把添加的语句加到相应的Case前面。）

 

    作了这么多，任务算完成1/3，加油！

下面咱们开始定义“InsertCode.htm”文件：

    在“fckeditor\editor\dialog\”下新增InsertCode文件夹，新建HTM文件InsertCode.htm，里面代码先拷贝“fckeditor\editor\dialog\fck_textfield.html”文件，好了，，大手术开始：

 

    首先，在“<title></title>”中加上“Insert Code Properties”，这个是打开的新窗体的标题；更改FCKeditor的JS文件“common/fck_dialog_common.js”的引用为“../common/fck_dialog_common.js”，再加上双鱼编辑器里的插入代码脚本“<script src="code.js" type="text/javascript"></script>”。

而后更改“window.onload = function()”函数，把里面的if  {}  else{}删除掉，再把function Ok()里的代码所有删除，加上下面2句：

oEditor.FCK.InsertHtml(code()) ;

    window.parent.Cancel() ;

由于咱们是更改为代码格式的字符串加到FCKeditor编辑器里，因此用到内置的InsertHtml函数，code()函数传过来的是字符串；至于下面的html代码，就更改成双鱼编辑器里InsertCode.htm的代码（这里就不提供了，本人把更改好的放上来，这里只作个简单说明）。

    下面咱们修改“code.js”文件里的代码，把“function code()”里的

window.returnValue = FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

window.close();

这两句更改成一句：

return FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

 

好了，至此，就可使用插入代码功能了。（添加其余功能的时候到这一步就能够完成了。）

完成后的编辑器图片：
 


看见最后一个图片没，这就是了,点击后出现的图形为：

 

嘿，兴冲冲地试了下，诶呀，怎么代码前这么多红XX呢？看下源代码，原来里面的折叠图片路径全是错的，这下郁闷了，试了N种方法，都没用。无奈，最后查看FCKeditor中其余的htm文件，发现个东东：FCKConfig.BasePath，做用是取得editor文件夹的相对路径，例如个人例子就是：“/AJAXEnabledWebSite1/FCKeditor/editor/”。好了，那如今为了获得咱们存放折叠图片的文件夹路径，咱们如今要定义一个变量，打开fckconfig.js文件，在文件最后一行以后加上这么一句：

FCKConfig.CodePath  = FCKConfig.BasePath + 'dialog/InsertCode/codep_w_picpaths/' ;

    有了图片路径以后，咱们的继续修改“code.js”文件：

首先，在“function code()”前面加上下面3句：

var oEditor = window.parent.InnerDialogLoaded() ;

var FCKConfig = oEditor.FCKConfig ;

var CodeImagePath   = FCKConfig.CodePath ;//获得图片所在文件夹路径

搜索“PiscesTextEditor/codep_w_picpaths/”，所有替换为“”（即，所有删除。注意：是空，不是空格；）

一样搜索“PiscesTextEditor\/codep_w_picpaths\/”，所有替换为“”

替换好以后，咱们就要用到上面的图片所在文件夹路径了，咱们这里使用正则替换字符串。

搜索“if (showLine) str = AddLineNumber(str);   ”，在它前面加上下面2句：

var src = /\b(src=")\b/g;

    str = str.replace(src,'src="'+CodeImagePath);//获得正确路径

意思就是，把全部img控件的只有图片名的src路径替换为正确的相对路径。

 

好了。。修改就到这里，不过，还只是完成了95%，为何呢，仔细试了下，双鱼编辑器的插入代码功能还有好多BUG。喜欢看下去的朋友继续看，不喜欢的能够直接下载个人文件了。

今天到此为止，明天咱们继续，修改Code.js文件，减小点BUG，源码明天提供。

  Trackback:[url]http://blog.csdn.net/zss1100/archive/2007/06/17/1655875.aspx[/url]