網路編輯器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。 聯姻完畢。入洞房吧！：）