从FCKEDITOR到ckeditor(二)----撰写自定义对话框,增加数学公式(与webEq的结合)

来源：互联网发布：白塔软件编辑：程序博客网时间：2024/05/17 21:01

[本文禁止转载 ]

ckeditor3.2.1

自定义对话框+自定义工具按钮,增加数学公式(与webEq的结合)

关键字:ckeditor,webeq,自定义按钮

说明：给ckeditor增加一个按钮，可以在弹出的对话框中输入webeq的数学公式并且插入到当前编辑器中

版本：webeq3.7+ ckeditor3.2.1

测试环境：IE8,IE6.0正常

fireFox3.5下公式显示不出来（哪位达人解决此问题，请email告之，谢谢）

有幸要用编辑器并且要求可以插入公式，就琢磨了琢磨，旧版的Fckeditor是指望不上了，代码完全不一样。

下面我把经过简明扼要地叙述一下，和大家一起分享，也算是抛砖引玉吧。

步骤：

----------------------------------------------------------

打开ckeditor目录 plugins,新建立一个math目录
里面的文件是:
blank.html//空白
math.html//对话框里iframe里调用的的主文件
plugin.js//插件加载的脚本，主要是创建公式输入对话框以及插入新公式到editor中的脚本
打开images目录，将一个显示按钮的图标math.gif（1kb,17*14大小）放入。

[本文禁止转载]

以下为实现代码（部分代码略去）

-----------blank.html---<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Button Properties</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><center>正在加载公式</center></body></html>-------------------------

---------math.html-------

---------math.html-------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Button Properties</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><mce:script type="text/javascript"></mce:script></head><body style="overflow: hidden;margin:0;border:0" mce_style="overflow: hidden;margin:0;border:0" ><applet codebase="/webeq/" code="webeq3.editor.InputControl" width="690" height="200"name="_webeq_popup" id="_webeq_popup"><param name="useslibraryversion" value="3,7,0,0"><param name="eq" value=""/></applet><mce:script language='javascript'></mce:script> </body></html>

------------plugin.js--------------------------

/**本插件面向ckeditor3.2.1*//**详细API参考 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html *//**author:iuprg drs163@163.com*/CKEDITOR.plugins.add('math',{requires: ['dialog','fakeobjects'],init : function( editor ){ editor.addCss( 'img.cke_mediaembed' + //这个不需要 '{' + '' + '' + 'background-position: center center;' + 'border: 1px solid #a9a9a9;' + 'width: 80px;' + 'height: 80px;' + '}' );// 增加按钮editor.addCommand('math', new CKEDITOR.dialogCommand( 'math' ) );editor.ui.addButton('EMath',{label : "EMath",command : 'math',icon:　this.path　+　'images/math.gif'} );CKEDITOR.dialog.add( 'math', function( editor ){return {title:'公式',minWidth: 700,minHeight: 230,contents:[{id : 'tab1',label : 'First Tab',title : 'First Tab',elements :/**页面元素*/[{id : 'pagetitle',width:'100%',type : 'html', //这里是按钮按下以后调用显示的页面，这里使用一个自定义htmlhtml : '<DIV id="div1" STYLE="WIDTH:690;height:200;background-color:#ff11cc" mce_STYLE="WIDTH:690;height:200;background-color:#ff11cc">'+ '<IFRAME NAME="math_frame" src="../ckeditor/plugins/math/blank.html" mce_src="ckeditor/plugins/math/blank.html" frameborder="0" scrolling="no" height=200 style="width:100%;height:200px"></IFRAME>'+ '</DIV>'},{id:'_dialog',type:'text',hidden:true}]}],onOk : function()/**确定按钮:按下后将公式插入到ckeditor*/{ var setMathValue=function(spanHtml,mathValue){ var d=CKEDITOR.dom.element.createFromHtml(spanHtml);var e=CKEDITOR.dom.element.createFromHtml(d.getChildren().getItem(0).getOuterHtml()); ... ... return _html; }return spanHtml; }//function var oSelection = this.getSelectedElement(); var oFakeImage; if(oSelection!=null){ oFakeImage=oSelection; if (oFakeImage){ //获取公式 try { //选中公式 } }catch(e) { }; }} /**形成公式*/ var hidden=""; var mml_string =""; var oMath; if (CKEDITOR.env.ie){oMath=document.math_frame._webeq_popup;}else{ oMath=document.all.math_frame.contentDocument._webeq_popup; }try{ mml_string = oMath.getMathML();//显示当前的内容}catch(e){}if ( mml_string.length == 0 ){alert( '公式编辑器初始化错误，请检查浏览器安全设置！') ;return false ;}var hidden = " ";//这里可以调用undo//处理以及过滤 DisplayHtml="形成公式..." var ooo=CKEDITOR.dom.element.createFromHtml(DisplayHtml); editor.focus(); editor.insertHtml(hidden); //插入当前元素到ckeditor editor.insertElement(ooo); editor.insertHtml(hidden); },onLoad:　function(){ // to do },onShow:function(){ if ((CKEDITOR.env.ie)){ document.math_frame.location.href='../ckeditor/plugins/math/math.html'; }else{ document.all.math_frame.src='../ckeditor/plugins/math/math.html'; }}};} );}} );

给config.js配置公式按钮

config.toolbar=[[ ...... ['Maximize','ShowBlocks','-','About'],['EMath']]; //EMath即是公式

效果图

作者：iuprg,drs163@163.com

[本文禁止转载]