trswcm6.5及以上二次开发-041fckeditor

1、FCKeditor 二次开档1 FCKeditor 简介FCKeditor 是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。 它志于轻量化，不需要太复杂的安装步骤即可使用。它可和、JavaScript、ASP、ASP.NET、ColdFu、Java、以及 ABAP 等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字 Frederico Caldeira Knabben 的缩写。著名的开源网页编辑FCKEditor 在 09 年发布更新到 3.0，并改名为 CKEditor。原来叫 FCK，是因为最初的开发者叫 Frederico Calder

2、ia Knabben；现在叫 CK，意指Content and Knowledge。新版的编辑器的更新包括：新的用户界面，一个支持 Plug-in 的 Javascript API，并提供对视觉者的使用支持。据的解释，CK 是对 FCK 的代码的完全重写，而且此项工作从 2007 年就开始了，并在今年初了多个测试版。至此，为大家服务长达 6 年的 FCKeditor 将被 CKeditor 替代。目前 WCM 中使用的依然为(什么版本！？)版本的 FCKeditor。2 添加一个新的 FCKeditora)首先在头部引入 FCKeditor 的 js 文件：b)创建编辑器实例，例如我要创建一个

3、名为 test 的编辑器，有两种方式：方式一：注：这段 js 就代表一个编辑器实例，js 在代码中的位置决定了编辑器相对于其他元素的位置。方式二：首先，在 html 代码中添加一个 textarea 元素，作为编辑器替换的元素：其次，在 js 中添加如下代码：!-3 添加一个新的插件3.1 添加一个简单的插件例如我要添加一个插件，使得每次做删除操作时，都保存一个回退点，则需要在editor/editor/js/plugins.js 中添加如下代码：3.2 添加一个简单按钮例如需要添加一个名为 SysConfig 的按钮， 点击该按钮， 弹出 alert ，可在editor/editor/js/

4、plugins.js 文件中添加如下代码：(function()(function()/只有当编辑器加载完成 FCK 才会有Editor、EditorWindow 方法if (FCK.Editor)Event.observe(FCK.Editor.body, keydown, function() if(FCK.EditorWindow)e= FCK.EditorWindow.event; keynum = e.keyCode/兼容 ff 等的 keyCode 方式else if(e.which)keynum = e.which/按键为 Backspace 或者Delete，则保存回退点if(

5、keynum=8 | keynum=46)FCKUndo.SaveUndoStep(););else/如果编辑器没加载完成则继续回调该函数setTimeout(arguments.callee,100);)();var oFCKeditor = new FCKeditor( test ) ; /test与 textarea 的 id/name 对应。oFCKeditor.BasePath = ./ ; oFCKeditor.Value = ; oFCKeditor.ReplaceTextarea() ;/-3.3 添加一个弹出框的按钮例如需要添加一个名为SysConfig 的按钮，点击该按钮，

6、 弹出一个框， 可在editor/editor/js/plugins.js 文件中添加如下代码：(function()/定义弹出窗口标题/定义项执行体，共 2 个参数，第一个为项标识，第二个为函数体mand 是编辑器中用于处理弹出窗口的函数，有 5 个参数，依次为工具/栏项标识，弹出窗口名称，弹出页面地址，弹出窗口宽度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sysconfig.html, 480, 220) ) ;/定义项的显示风格，FCKToolbarButton 函数的参数

7、仿照下面填写即可，第一个/为项标识，第二个为鼠标移到该时的说明文字，后面为 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ;/关联绑定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();(function()自定义mand 对象，主要步骤就是先，然后定义此方法的 Execute 和GetSe实现，一般项目定制，仿照下面写即可varmand = fu

8、nction()/实际执行体，切忌不要放在上面的空对象中。totype.Execute = function() alert(test);/点击按钮后的执行函数totype.GetSe = function() return FCK_TRISE_OFF;/项绑定函数体，第一个参数为命令名称，第二个参数为对应令函数名。mand( SysConfig,d();/定义项的显示风格，FCKToolbarButton 函数的参数仿照下面填写即可，第一个为工具栏项标识，第二个为鼠标移到该时的说明文字，后面为 nullvar oSysConfigItem = new FCKT

9、oolbarButton( SysConfig, 测试,null, null, null, null, null) ;/关联绑定,第一个参数为按钮名称标识，第二个参数为对应的按钮 FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();4 粘贴操作目前编辑器中有 4 个与粘贴相关的按钮：粘贴、粘贴为无格式文本、纯文本粘贴(含图)、从 MS Word 粘贴。这 4 个粘贴操作对应的操作函数为注：按 Ctrl+V 相当于点击粘贴按钮，将会执行 FCK.Paste 函数；FCK.Paste 函数中对会通过对配置参数的判断以及剪切内

10、容特殊样式的判断，来选择对应的粘贴方式。区分是否从 word 粘贴过来的正则表达是为：含有该样式的则为从 word 粘贴过来的内容。4.处理粘贴的反馈可从以上函数入手。5 FCK 源码模式和设计模式的关联方式一般情况下源码模式和设计模式代码是一致，不需要做什么特殊处理。但有些特殊情况，如：分页符，在设计模式下看到的是一个 img 元素，但是在源码模式下看到的是一个，像这种源码模式下与设计模式下不一致的情况就需要做相应处理。设计模式下的代码是元素真实的代码，源码模式下的代码只是元素在源码模式下的一个代表符号。总体思路是：re = /*( class=?MsoNormal?)|(=mso-)/gi

11、按钮名称相应函数粘贴FCK.Paste粘贴为无格式文本FCK.PasteAsPlaext纯文本粘贴(含图)WindosteAsPlaext从 MS Word 粘贴FCK.PasteFromWordFCKLang.SysConfigTitle = 测试;/定义项执行体，共 2 个参数，第一个为项标识，第二个为函数体mand 是编辑器中用于处理弹出窗口的函数，有 5 个参数，依次为工具/栏项标识，弹出窗口名称，弹出页面地址，弹出窗口宽度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sys

12、config.html, 480, 220) ) ;/定义项的显示风格，FCKToolbarButton 函数的参数仿照下面填写即可，第一个为项标识，第二个为鼠标移到该时的说明文字，后面为 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, 测试,null, null, null, null, null) ;/关联绑定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();1.在设计模式下元素的真实代码片段 A。通过设定该元素的 realElement 与源码模

13、式下的元素 B 关联起来。这样在切换到源码模式时，该元素对应的代码将表现为 B。添加操作使得从源码模式切换到设计模式时，B 能重新还原为 A。下面仍以分页符为例,相关代码如下:从源码模式切换到设计模式是，所需要做的处理：这段代码的总体思路是：获取到源码模式下的所有 TRS_PAGE_SEPARATOR 节点，在该节点前面img 节点，并删除 TRS_PAGE_SEPARATOR 节点。6 FCKeditor 常用接口FCKPageBreaksProsor.Pros= function()var aPageSeps =.geementsByTagName( TRS_PAGE_SEPARATOR

14、) ; var ePageSep ;var i = aPageSeps.length - 1 ;while ( i = 0 & ( ePageSep = aPageSepsi-) var oFakeImage =FCKProsor_CreateFakeImage( FCK PageBreak,ePageSep.cloneNode(true) ) ; ePageSep.parentNode.insertBefore( oFakeImage, ePageSep ) ; ePageSep.parentNode.removeChild( ePageSep ) ;totype.Execute = function()/创建 TRS_PAGE_SEPARATOR 元素var e = FCK.Editor.createElement(TR