trswcm6.5及以上二次开发-034器相关

1、修订序号变更日期变更动作变更内容详情描述版本1.2010-04-25DEV2新建新建本文档1.02.2011-01-12修改1 添加了修改页，以后本文档有修改时请填写修改信息。1 编辑器相关1.1 前言WCM 的实施或二次开发过程中，一旦遇到编辑器相关的，很多同事就感到很茫然，不知道该如何下手。一方面是由于编辑器跟其他 wcm 对象不太一样，它是个独立的东东；再者，相关介绍文档和二次开发手册的不齐全也给实施 带来了难度。本文以 WCM65 的编辑器为例，就项目中通常反馈的一些问题及二次开发做个说明，后期会不断完善补充。1.2 概述目录功能./ wcm / app / editor编辑器目录，所

2、有编辑器相关一般都在这个目录（库,库页面除外）./ wcm / app / editor / fckconfig.js编辑器的配置文件，可修改此文件来改变编辑器特性。常用的有以下几个：/是否开启无格式文本粘贴 FCKConfig.ForcePasteAsPlaext= false ;/是否对从 word 文件中拷贝的信息作额外处理（仅限）FCKConfig.AutoDetectPasteFromWord = true/粘贴样式开关，开启后粘贴到编辑器的信息会在外部加上一个 div 容器，样式名为UnionStyleName.FCKConfig.PasteToUnionStyle = false

3、;FCKConfig.UnionStyleName = cas_content;./ wcm / app / editor / editor / dialog编辑器弹出页面目录。编辑器 中有很多是要弹出窗口的，它们的实现都在这个目录，比如： 页面属性为 fck_docprops.html； 为fck_image.html。./ wcm / app / editor / editor / css编辑器的默认加载样式目录 （编辑器自定义样式功能中涉及的栏目和站点的自定义样式文件就存放于该目录下）./ wcm / app / editor / editor / lang编辑器多语言翻译目录，默认加载

4、为 cn.js，项目定制中遇到有添加中文信息的，建议采用此种方式1.3 实战示例1.3.1 目前编辑器项太多，通常编辑只关注常用的几个，如何定制编辑器项显示？解答：目前 WCM65 已经支持对栏目级编辑器项自定义，但对没有定制的栏目默认显示的仍然是编辑器自带的项，这里说下如何调整编辑器默认的项显示：打 开 编 辑 器 配 置 文 件 （ ./wcm/app/editor/fckconfig.js ）， 找 到FCKConfig.ToolbarSetsWCM6，这是个二维数组，每一项就是要显示的项，数组项的显示顺序，其中 WCM6AdvToolbar 是高级顺序就是定制高级，如果选上它还可以FC

5、KConfig.ToolbarSetsWCM6_ADV，可根据实际需要进行调整。1.3.2 如何新增一个自定义的项？需求：在打印操作。项右边增加一个“系统配置”菜单，点击后弹出一个新页面，执行相关分析：通过上例已经了解编辑器是如何加载的操作并获得响应。项的，现在主要是如何定义这个项修改步骤：添加项打 开 编 辑 器 配 置 文 件 （ ./ wcmFCKConfig.ToolbarSetsWCM6，在 打印命名要求为英文并唯一即可。/app / editor / fckconfig.js ），找到 项 Pr 后追加一项 SysConfig ，这里的绑定执行操作打开 ./ wcm / app /

6、 editor / editor / lang / cn.js,这个文件里只定义了一个FCKLange 变量，它是编辑器处理多语言的公共变量，需要在后面追加此项项要用到的中文变量，本例中性）需要新增一个”系统配置”变量项。如果没有可跳过这步。（注意 json 格式的合法打开./ wcm /app / editor / editor / js / plugins.js,在最后面追加下列代码，其中标识标识SysConfig一定要与上一步定义的保持一致。按上述要求调整后，刷新浏览器，即可发现项已添加，点击后也可弹出指定页面。var FCKLang = BREMOVEBLOCKSTYLE :段落格式,

7、SysConfigTitle:系统配置相关问题：如何给新增的项添加？解答：按照上述步骤完成后发现新增的项没有，此时可上传一张 16*16 像素至 ./ wcm / app / editor / editor / skins / silver / toolbar 目录的命名必须要跟前面定义的菜单标识保持一致且要求为小写，如上例，即可上传一张 sysconfig.gif。新增一个项，希望点击后对编辑器内容做相关处理，而不是弹出页面，就像粘贴，全选那样，这个该如何做呢？解答：步骤和上例基本一致，唯一不同的是最后的执行体不能使用而是需要自己定义。具体可参照下述代码，刷新后执行按钮，即可弹出提示信息。m

8、and，/系统设置 (function()/定义弹出窗口标题FCKLang.SysConfigTitle = FCKLang.SysConfigTitle | 系统配置;自定义mand 对象，主要步骤就是先，然后定义此方法的 Execute和 GetSe 实现，一般项目定制，仿照下面写即可varmand = function()/实际执行体，切忌不要放在上面的空对象中。totype.Execute = function()alert(22);totype.GetSe = function() return FCK_TRISE_OFF;/系统设置 (functio

9、n()/定义弹出窗口标题FCKLang.SysConfigTitle = FCKLang.SysConfigTitle | 系统配置;/定义项执行体，共 2 个参数，第一个为项标识，第二个为函数体mand 是编辑器中用于处理弹出窗口的函数，有 5 个参数，依次为工具/栏项标识，弹出窗口名称，弹出页面地址，弹出窗口宽度，高度mand( SysConfig,d( SysConfig, FCKLang.SysConfigTitle, plugins/sysconfig/fck_sysconfig.html,480, 220) ) ;/定义项的显示风格，FCKToolbarButton 函数的参数仿照

10、下面填写即可，第一个/为项标识，第二个为鼠标移到该时的说明文字，后面为 nullvar oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ;/关联绑定FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();1.3.3 如何在编辑器编辑区域新增右键菜单？需求：新增一个“测试“右键菜单，在剪切操作下面，点击后执行相应的动作。修改步骤：定义要用到的中文变量打开 ./ wcm /

11、 app / editor / editor / lang / cn.js，在后面追加变量添加菜单项打开./ wcm / app / editor / fckeditor_ex.js，搜索 FCK_Context_GetListener 方法，发现有个分支语句，因为在不同情况下右键菜单是不同的，比如一般情况下和选中后的右键菜单就不同。这里以一般为例，在 Generic 分支里，剪切项 cut 下面仿照着添加一列，这里的 Test 是新增菜单项的唯一标识，命名为英文唯一即可。/参数介绍：AddItem 共有 4 个参数，第一个为右键菜单标识，第二个为移到上面的提示信息，第三个为右键菜单左侧的 ，

12、0 或 null 是没有，也可以是字符串，传入当前图标的路径；第四个定义响应状态，一般仿照写即可。/无 方式.AddItem( Test, FCKLang.Test, 0,mand( Test ).GetSe() = FCK_TRISE_DISABLED ) ;/自定义 方式:：上传 至指定路径，此处直接 即可，注： 大小 16*16*.AddItem(Test,FCKLang.Test,./editor/skins/silver/toolbar/test.gif,mand( Test ).GetSe() = FCK_TRISE_DISABLED ) ;var FCKLang = BREMOV

13、EBLOCKSTYLE :段落格式,SysConfigTitle:系统配置, Test:“测试”/项绑定函数体mand( SysConfig,d();/下面绑定方式和上例一致var oSysConfigItem = new FCKToolbarButton( SysConfig, FCKLang.SysConfigTitle,null, null, null, null, null) ; FCKToolbarItems.RegisterItem( SysConfig, oSysConfigItem ) ;)();设置响应函数体打开./ wcm / app / editor / fckedito

14、r_ex.js，搜索mand 方法，里也仿照着加个 case 即可，说到这面也有个分支语句，对各个菜单项定义相应的操作，里，看过 1.3.2 的应该会发现，这里和定义就这 2 中，一种是封装好的项操作有点类似，是的，编辑器中执行体mand 方法，弹出页面；另一种就是自己个执行体，然后实现 Execute 和 GatSe 方法即可。针对本例，如果是要弹出窗口的，可以：如果是自定义函数体的，可以：1.3.4 如何在编辑器下方添加自定义的按钮？需求：在编辑器下方“全转半”处增加一个“半转全“按钮。修改步骤：定义要用到的中文变量打开 ./ wcm / app / editor / editor / l

15、ang / cn.js，在后面追加变量var FCKLang = BREMOVEBLOCKSTYLE :段落格式,SysConfigTitle:系统配置,case Test:od =d();break;然后在此函数下面按照三步骤定义mand 即可varmand = function()/实际执行体，切忌不要放在上面的空对象中。totype.Execute = function() alert(22);totype.GetSe = function() return FCK_TRISE_OFF;case Test:/具体参数见 1.3.2d( Test, FCKL

16、ang.Test,htl, 415, 300 ) ;break;添加项打开 ./ wcm / app/ editor / editor / fckeditor.jsp。搜索 arr 变量定义，发现是一个数组，上面定义的就是显示在下方的各选项，仿照着在后面追加即可。定义响应函数体打开页面 ./ wcm / app / editor / editor / fckeditor.js,搜索 actionClearbl,发现下面还定义了很多 actonXX 的函数体，是的，这里定义的就是编辑器下方按钮的执行体，具体的引用规则是：action + 上面actionSb2db 方法。变量标识（首字母要大写）

17、，本例中，要定义的就是1.3.5 如何获取编辑器正文值或如何给编辑器正文赋值？解答：回答这个问题，首先要了解编辑器是如何与文档编辑页面交互的，编辑器首页面路径地址是 ./ wcm / app / editor / editor.html,它是通过 iframe 嵌在文档编辑页面./ wcm / app /_addedit.jsp 中的：/_addedit.jsp页面内嵌代码div id=html_editor style=display:/获取当前编辑器内容var sHtml = FCK_GetHTML();/对正文字符进行半转全替换var sNewHtml = parseDb2Sb(sHtm

18、l);/用新的正文内容填充编辑器 PageContext._replaceHtml(sHtml, sNewHtml);var arr= /按钮定义的规则如下：每个按钮占 3 位，第一为操作唯一标示位，要求英文（小写）唯一即可，第二位是鼠标移到按钮上的提示信息，第三位是按钮上的显示文字。clearstyle,FCKLang.TIP1 , FCKLang.TIP2, clearclasses, FCKLang.TIP3, FCKLang.TIP4, clearbl, FCKLang.TIP5, FCKLang.TIP5, outdentpara, FCKLang.TIP6,FCKLang.TIP6

19、, replaces, FCKLang.TIP14, FCKLang.TIP7, db2sb, FCKLang.TIP8, FCKLang.TIP9,/新增半转全按钮，sb2db, FCKLang.TIP15, FCKLang.TIP16;Test:“测试”,TIP15: 半角转全角,TIP16: 半转全编辑器已经提供了提取和设置内容的接口，所以首要问题就是在当前页找到编辑器_addeditl.js 为例：首页，以文档编辑页面1.3.6 如何在自定义操作中获取编辑器对象，并调用相关接口？分析：式：自定义面讲如何自定义d 和 调用选项和右键菜单时提到了编辑器中新增操作的两种方mand 方法弹出页

20、面，但具体的执行体没有讲解详细，本例中就针对这 2 中方式大概讲解下如何获取编辑器对象和调用相关接口，仍以 1.3.2 中新增的“系统配置”项进行说明。修改步骤：mand 弹出窗口模式下面为 1.3.2 例出页面 fck_sysconfig.html 的部分实现自定义d 模式/弹出页面的父页面都是./ wcm / app /editor / editor / fckdialog.html.调用下面的接口即可获取编辑器对象var oEditor= windorent.InnerDialogLoaded() ;/获取 FCK 后，即可调用编辑器的大部分应用接口；可以通过 setHtml,getHt

21、ml 进行编辑器获取和赋值处理；也可以用 CreateElement 产生新元素，mand（“项标识”）直接执行命令。var FCK= oEditor.FCK ;/获取多语言处理对象，后面的中文变量就可以用 FCKLang.XX var FCKLang= oEditor.FCKLang ;/获取编辑器配置对象，用 FCKConfig.XX 来获取某一个具体配置项var FCKConfig= oEditor.FCKConfig ;/首先获取到编辑器首页面的窗体对象，然后直接调用 GetEditor 接口获取编辑器对象var oTrsEditor = $(_trs_editor_);var FCK

22、 = oTrsEditor.contentWindow.GetEditor();/获得当前编辑器内容var sRetrun = FCK.GetHTML(true,true);/与获取类似，也可以直接设置编辑器值 FCK. SetHTML(stringValue)iframe id=_trs_editor_ style=width:100%;height:100%; frameborder=0 src=./editor/editor.html?ChannelId=&SiteId= allowtransparency=true在./ wcm /app / editor / editor / js

23、/ plugins.js 文件中可以直接FCKConfig 对象，相关属性和上面一致。FCK，FCKLang，1.3.7 如何向当前光标处追加内容？需求：个以 1.3.3 中自定义的 Test 右键菜单为例，要求点击 Test 后，在当前光标处一。解答： 重写mand 的函数执行体相关问题：单纯的字符串应该怎么调用呢？解答：单纯的字符串可以直接调用 FCK。InertHtml 接口如果的是一端有结构的元素，比如一张和一段说明文字，要求文字在图片下面，又该如何调用呢？解答：/处理此问题，首先要确定好要到编辑器中的 html 格式。本例中大概如下：this is a test!/然后即可仿照下述代

24、码进行totype.Execute = function()/首先依次定义各子节点和父节点元素var oImage = FCK.CreateElement( IMG );oImage.setribute(src, ht/img/baidu_logo.gif) ; oImage.setribute(border, 0 ) ;/实际执行体，切忌不要放在上面的空对象中。totype.Execute = function() FCK.InsertHtml( This is a test. );/实际执行体，切忌不要放在上面的空对象中。totype.Exe

25、cute = function() var oImage = FCK.CreateElement( IMG );oImage.setribute(src, ht/img/baidu_logo.gif) ; oImage.setribute(border, 0 ) ;oImage.setribute(alt, “”) ;1.3.8 编辑器的”内容模板”工具项内置了 5 套基本模板，现在自定义一套模板或修改已有模板的展现形式，应该怎么做？解答：内置模板在 ./ wcm / app / editor / fcktemplates.xml 文件中，打开文件发现，每个模板就是一个 template 节点

26、，具体节点的定义规则见下，新增一套模板只需仿照着实现template 节点即可。/首节点定义显示名称和，存放路径为./ wcm / app / editor / editor / dialog / fck_template / images 目录，建议大小为（100*70）px.细心的你可能发现，wcm 中内置的模板有 2 类，一种是弹出窗口，需要用户提前输入相关参数的，如注释模板，而另一类点击后直接就生成代码，这个主要就是通过wizared 属性设置，为 basic 时弹出窗口，为 none 是直接。为某段内容进行额外的注释。/html 节点的内容就是点击后的内容，其中对需要用户输入的地方可以用类似(# XX)的方式定义，然后在后面的 Params 节点中替换此变量!CDATA注释:#descoImage.setribute(a