`
j2eeli
  • 浏览: 45816 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

FCKeditor,添加自定义工具栏---插入代码

阅读更多

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

 

清清泡泡http://j2ee.blog.sohu.com/36813753.html(详细讲解了如何添加自定义工具栏,可是很多都是不需要的步骤)
幻想曲http://www.lemongtree.com/Archives/fckedit_toolbar.aspx
http://www.lemongtree.com/Archives/fckeditor_toolbar_2.aspx(只给了源码没说明,= =!源码地址在16楼的回复里)

 

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

作品链接:http://www.2fstory.net/blog/View.aspx?blogID=47      

 

首先,打开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.jsfckeditorcode_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”,这个是打开的新窗体的标题;更改FCKeditorJS文件“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/codeimages/' ;

    有了图片路径之后,我们的继续修改“code.js”文件:

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

var oEditor = window.parent.InnerDialogLoaded() ;

var FCKConfig = oEditor.FCKConfig ;

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

搜索“PiscesTextEditor/codeimages/”,全部替换为“”(即,全部删除。注意:是空,不是空格;)

同样搜索“PiscesTextEditor\/codeimages\/”,全部替换为“”

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

搜索“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,源码明天提供

分享到:
评论
3 楼 AI渣娃 2010-08-19  
我最近也在研究自定义组件。要实现的功能就是在编辑器中插入模板语言和JSP标签语言。想实现的效果就是点右键,选择自定义标签,确定。然后源代码里就插入这个语句<test a=2 test/>,视图页面显示的是一个自定义的图标。比较有难度 呵呵
2 楼 j2eeli 2010-07-27  
shang548 写道
看起来好像是挺复杂的!

弄清楚原理就简单了:)
1 楼 shang548 2010-07-08  
看起来好像是挺复杂的!

相关推荐

    fckeditor-java-2.6-bin

    3. **高度可定制**:开发者可以根据项目需求自定义编辑器的外观和功能,例如调整工具栏布局,添加或删除编辑功能。 4. **支持多种文件上传**:FCKeditor内置了文件管理器,允许用户上传图片、文档和其他类型文件,...

    fckeditor-java-2.6-src

    4. **自定义功能**:解释如何扩展FCKeditor的功能,如添加新的按钮、修改默认样式或工具栏布局。 5. **与其他技术的整合**:可能会涉及如何将FCKeditor与Spring、Struts等框架集成,以及与数据库、文件系统交互,...

    fckeditor-java-2.5-bin.zip

    2. **配置编辑器**:根据项目需求,配置FCKeditor的初始化参数,如编辑器宽度、高度、工具栏布局等。 3. **集成到Java应用**:将服务器端的Java类和配置文件部署到应用服务器,同时在前端页面引入编辑器的JavaScript...

    wp 插件 fckeditor-for-wordpress-plugin.3.3.1

    3. **自定义配置**: 插件允许管理员根据需求自定义编辑器的外观和功能,例如调整工具栏按钮、选择字体和颜色方案,甚至添加自定义代码。 4. **兼容性**: FCKeditor 与多种浏览器兼容,包括IE、Firefox、Chrome和...

    fckeditor-java-core-2.4.1

    在使用FCKeditor-java-core-2.4.1时,开发者需要将其引入到他们的Java Web项目中,配置相关的参数,如编辑器的宽度、高度、工具栏布局等,并在需要的地方调用API来初始化和使用编辑器。同时,为了保证安全性和用户...

    fckeditor-java-demo-2.4.1.rar_DEMO_fckeditor_fckeditor demo_fcke

    FCKeditor的可定制性强,可以根据项目需求进行各种自定义,如修改编辑器样式、增加自定义按钮、调整工具栏布局等。此外,还可以利用FCKeditor提供的API实现更复杂的功能,如实现与服务器端的数据同步、实时预览等。 ...

    fckeditor2.3-2.6-java

    2. **配置编辑器**:设置编辑器的基本属性,如宽度、高度、工具栏布局等。 3. **初始化编辑器**:在网页中通过JavaScript调用FCKeditor的初始化方法。 4. **数据交互**:处理编辑器内容的获取和提交,通常涉及到与...

    FCKEditor完整使用说明--一步步教你使用FCKeditor插件

    1. **自定义工具栏**:通过修改`fckconfig.js`文件,你可以定制编辑器的工具栏,添加或删除按钮。 2. **皮肤更换**:FCKeditor提供了多种皮肤,用户可以根据喜好选择,或者自定义皮肤。 3. **编辑器安全**:限制...

    FCKeditor_2.6.8.zip

    - **自定义配置**:开发人员可以根据需求自定义编辑器的外观和功能,例如设置工具栏按钮、语言选项等。 **2. FCKeditor的使用方法** 在FCKeditor 2.6.8中,开发人员需要将压缩包解压后,将相关文件整合到网站项目...

    FCKeditor网页编辑工具栏

    **FCKeditor网页编辑工具栏详解** FCKeditor是一款经典的开源HTML编辑器,它为网页开发者提供了一种方便、直观的在线文本编辑解决方案。这款编辑器以其轻量级、易于集成和高度可定制的特点,受到了广泛的欢迎。在...

    在线编译器设置自己的工具栏

    通过以上步骤,用户可以在不修改原始配置文件的情况下,轻松地为在线编译器中的FCKeditor自定义工具栏。这种方法不仅提高了用户的个性化体验,还简化了开发者的维护工作。当然,除了上述提到的方法外,还可以探索更...

    FCKeditor添加自定义按钮的方法

    这通常涉及到工具栏的构建,其中按钮的显示部分是通过调用特定的函数来实现的。例如: ```javascript case 'MyAlbum': B = new FCKToolbarButton('MyAlbum', FCKLang.MyAlbum, null, null, true, null, 67); ...

    fckeditor的配置详解

    1. **自定义工具栏** 可以通过增加、删除或重组`ToolbarSets`中的元素来定制工具栏。例如,如果想在工具栏上添加一个“插入图片”的按钮,可以添加`['Image']`到对应的工具栏组。 2. **语言配置** FCKeditor支持...

    FCKeditor 2.6中添加插入视频和音频功能

    最后,开发者需要在FCKeditor的配置文件中注册新插件,这样它才能在编辑器的工具栏上显示,并可供用户使用。 总结,要在FCKeditor 2.6中添加插入视频和音频的功能,你需要编写一个JavaScript插件,设计一个HTML...

    FCKeditor使用与代码

    用户可以根据实际需求自定义工具栏布局,增加或减少功能项。 **FCKeditor的使用**: 使用FCKeditor需要在HTML页面中引入相关脚本文件,并在页面中创建一个`&lt;textarea&gt;`标签,然后通过JavaScript调用FCKeditor的初始...

    fckeditor源文件和demo

    - **配置**:FCKeditor有许多可配置的选项,如工具栏布局、字体样式、语言设置等,可以根据需求进行个性化定制。 - **插件扩展**:FCKeditor拥有丰富的插件系统,可以扩展其功能,例如添加视频插入、代码高亮等。 - ...

    FCKeditor开发jar包及fckeditor文件夹

    - FCKeditor支持自定义工具栏,开发者可以根据需求调整工具栏按钮。 - 可以通过编写自定义插件扩展其功能,比如添加新的编辑命令或对特定格式的支持。 - 使用fckconfig.js和fckstyles.xml进行配置,可以限制用户...

Global site tag (gtag.js) - Google Analytics