站长论坛

标题: 网络编辑器FCKeditor和网络公式编辑器WebEQ结合使用的方法 [打印本页]

作者: tznktg 时间: 2009-3-9 15:31
标题: 网络编辑器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。联姻完毕。

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)