PHP程序员站--PHP编程开发平台
 当前位置:主页 >> PHP基础 >> 基础文章 >> 

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

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

来源:互联网  作者:  发布时间:2009-02-25
再战FCKeditor。 终极PK FCKeditor。让FCKeditor和WebEQ联姻。

再战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:meconsea@hotmail.com
 * @description:该函数只用于支持MathPlayer的。
 */
<script type="text/javascript">
  //采用FCK的API
            var oEditor = window.parent.InnerDialogLoaded() ;

        function check() {

          var mml_txt = document.myApplet.getPackedMathML();
         //为了支持MP 则进行了替换。
         //如果直接采用WebEQ来解析的话部分代码如下:
       
                                mml_txt += "";
                                  mml_txt = mml_txt.replace(/\</g,"<mml:");
                                  mml_txt = mml_txt.replace(/\<mml:\//g,"</mml:");


                                  mml_txt = mml_txt.replace(/\'/g,"");
            //采用WebEQ解析代码如下:
             /**
                var head="  <applet archive=\"WebEQApplet.jar\" codebase=\".\" code=\"webeq3.ViewerControl.class\" width=\"100\" height=\"30\" align=\"middle\"><param name=\"useslibrary\" value=\"WebEQApplet\">      <param name=\"useslibrarycodebase\" value=\"WebEQApplet.cab\">      <param name=\"useslibraryversion\" value=\"3,6,0,0\"><param name=\"eq\" value=\" ";

var tail=" \"><param name=\"foreground\" value=\"black\"><param name=\"background\" value=\"white\"><param name=\"selection\" value=\"true\" ><param name=\"parser\" value=\"mathml\"><param name=\"size\" value=\"12\"></applet>";
var dis_mml = head+mml_txt+tail;
oEditor.FCK.InsertHtml( dis_mml || "" ) ;
 

              */
//WebEQ解析代码有些乱,凑合着看吧!

                                oEditor.FCK.InsertHtml( mml_txt || "" ) ;
                                window.parent.Cancel() ;
        }
    </script>

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。 联姻完毕。


延伸阅读:
FCKeditor的精简及修改
在线web编辑器FCKeditor 的配置和使用方法
将FCKeditor整合进页面
FCKEditor自动过滤的解决办法
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号