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

最新推荐文章于 2021-03-31 11:59:40 发布

安优小青和他的程序生活

最新推荐文章于 2021-03-31 11:59:40 发布

阅读量5.7k

点赞数

文章标签： fckeditor function math html border

本文链接：https://blog.csdn.net/IUPRG/article/details/5812407

版权

[本文禁止转载 ]

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', //这里是按钮按下以后调用显示的页面，这里使用一个自定义html html : '<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

[本文禁止转载]

安优小青和他的程序生活

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
7
评论
从FCKEDITOR到ckeditor(二)----撰写自定义对话框,增加数学公式(与webEq的结合)

[本文禁止转载，如有需稿请联系本人iuprg,drs163@163.com]ckeditor3.2.1自定义对话框+自定义工具按钮,增加数学公式(与webEq的结合)关键字:ckeditor,webeq,自定义按钮说明：给ckeditor增加一个按钮，可以在弹出的对话框中输入webeq的数学公式并且插入到当前编辑器中版本：webeq3.7+ ckeditor3.2.1测试环境：IE8,IE6.0正常fireFox3.5下公式显示
复制链接

扫一扫