您当前的位置: 首页 » PHP/Perl编程 » 网络编辑器FCKeditor和网络公式编辑器WebEQ结合使用的方法
网络编辑器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。 联姻完毕。
终极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。 联姻完毕。