再战FCKeditor。

开发Web的积累 专栏收录该内容
4 篇文章 0 订阅


再战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。 联姻完毕。入洞房吧!:) 

  • 0
    点赞
  • 16
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值