网络编辑器FCKeditor和网络公式编辑器WebEQ结合使用的方法

原文链接：http://www.cnblogs.com/enterbeijingthreetimes/archive/2008/09/02/1282157.html

作者不详

 

再战FCKeditor。

终极PK FCKeditor。让FCKeditor和WebEQ联姻。

FCKeditor是什么我就不忽悠了，最重要的是忽悠整合WebEQ到FCK里面去。FCK调侃为KFC(喜欢吃吗？)，再来个变态强人的解释就是FCK = F*** C** K** 的缩写。哈哈 强吧。

好了不扯了，开始忽悠了！主要的是分为两部分讲，第一部分：如何加入公式编辑器WebEQ这个插件到FCK? WebEQ怎么用？

第二部分PK几下FCK的几个API和几个常见的Error吧？

关于FCK的基本应用和改编见另外一篇 《搞定FCKeditor》（http://blog.csdn.net/meconsea/archive/2006/06/26/835931.aspx）

如何将WebEQ插入到FCK，WebEQ怎么用？

很简单改动几个小地方而已？注意：因为它支持多国语言，我只改了zh_cn.js.因为我只会汉语，爱国吧？ 哈哈 :) 还有我只改了IE的。FF就饶了我吧！
begin: 好了注意听吹了。
1>首先将fck_expression文件夹拷贝到FCKeditor_HOME/editor/dialog/下面。fck_expression里面的内容包括fck_expression.html和WebEQApplet.jar.两个文件夹。注：WebEQApplet.jar的路径很重要啊。
fck_expression.html的部分代码如下：
/**
 * @author meconsea
 * @Email: [email protected]
 * @description:该函数只用于支持MathPlayer的。
 */

2>文件拷完了，就要改那乱七八糟的图片和JS了。

发现FCK中的图片是放在一个文件里面了吧？没发现就好好看看skins/office2003.silver.default下面的fck_strip.gif了。

增加一个编辑器的图标进去，注意高度啊。要不就的FCK里面就产生视觉冲突了！相信吗？不相信看看下面需要改的JS就知道了。

2.1先给他在FCKConfig.ToolbarSets['..']安个家。在你Toolbar里面放入'Expression'.放哪里我就不管了。

2.2支持下汉语吧修改下zh_cn.js.

Expression                        : "插入公式", //鼠标移上去的时候来个提示，友好些嘛。
DlgExpressionTitle : "公式编辑器",//增加个名字啊，不能当无名氏吧

2.3剩下的就是修改fckeditorcode_ie.js.(最好看看源代码，要是直接看FCK处理过的这个js，嘿嘿 。。。没有注释 没有换行。我这里对不起FF了，想支持也直接改fckeditorcode_gecko.js);

   (1) 先改FCKRegexLib.NamedCommands。加上Expression就可以了。
   (2) 再处理下FCKCommands.GetCommand 就行了。我就不写代码了。照着葫芦画个瓢就行。就是case一个Expression就行。（不是用嘴啊，记得switch()中的case啊。）
   (3) 再处理下FCKToolbarItems.GetItem函数就可以了。也是case下。这里和图片的大小有关啊。嘿嘿 下面的67很重要。
     
                        'Expression',FCKLang.Expression,null,null,false,true,67);

好了，让WebEQ和FCK联姻就这么简单了。其实思路是一样的。让EQweb和FCK联姻也行啊。哈哈 ：） 庆祝下 看看效果。

 

怎么样 效果不错吧？哈哈！

下面进行第二个忽悠了！
PK几个FCK的几个常用的API
1.获取编辑区域的内容：
  获取编辑区域的内容有两个函数分别是：
  GetInnerHTML() 和 GetContents();
 
  根据实际业务，我稍作修改了这几个函数。
  function GetInnerHTML(fck_instance_name){
        var oEditor = FCKeditorAPI.GetInstance(fck_instance_name) ;
        return  oEditor.EditorDocument.body.innerHTML;
  }
 function GetContents(fck_instance_name)

{
        var oEditor = FCKeditorAPI.GetInstance(fck_instance_name) ;

        return       oEditor.GetXHTML( true )  ;

  }

获取内容尽量采用第二个方法，因为假如里面插入了Flash。第一个方法就无法获得Flash的标签，而是给你替换了Image。

还有很多我就不一一PK了。
看看他Source中的实例吧！

最后我估计最令人头疼的就是他这个字符集问题。
假如Web应用采用的是UTF-8下面的可以不看了。
假如你没有碰到上传文件的路径和文件名是中文的Go To end
解决他的中文路径和文件名问题最直接有效的方法就是改掉他的SimpleUploaderServlet。思路就是改掉他的上传后的文件名，采用随机数或时间等等重命名文件。然后再把这个路径返回到页面。就行了。
部分代码如下：
注释掉
/**
                String ext=getExtension(fileName);
                File pathToSave=new File(currentDirPath,fileName);
                fileUrl=currentPath+"/"+fileName;
   **/
    我的更改如下：
                //更改路径支持中文
                String ext=getExtension(fileName);//后缀名
                String random=String.valueOf((Math.abs((new Random()).nextInt()) % 10000));//生成随机数
                String namebydate=String.valueOf(Calendar.getInstance().getTime().getTime())+ random+"."+ext;
                File pathToSave=new File(currentDirPath,namebydate);
                fileUrl=currentPath+"/"+namebydate;//返回上传后的文件路径

好了 改奏凯歌了。 一切oK。 联姻完毕。入洞房吧！：）