从FCKEDITOR到ckeditor(二) 撰写自定义对话框,增加数学公式(与webEq的结合)
ckeditor3.2.1
自定义对话框+自定义工具按钮,增加数学公式(与webEq的结合)
关键字:ckeditor,webeq,自定义按钮
说明：给ckeditor增加一个按钮，可以在弹出的对话框中输入webeq的数学公式并且插入到当前编辑器中
版本：webeq3.7+ ckeditor3.2.1
测试环境：IE8,IE6.0正常
fireFox3.5下公式显示不出来（哪位达人解决此问题，请email告之，谢谢）
[本文禁止转载，如有需稿请联系本人iuprg,[email protected]]
有幸要用编辑器并且要求可以插入公式，就琢磨了琢磨，旧版的Fckeditor是指望不上了，代码完全不一样。
下面我把经过简明扼要地叙述一下，和大家一起分享，也算是抛砖引玉吧。
步骤：
----------------------------------------------------------
打开ckeditor目录 plugins,新建立一个math目录
里面的文件是:
blank.html//空白
math.html//对话框里iframe里调用的的主文件
plugin.js//插件加载的脚本，主要是创建公式输入对话框以及插入新公式到editor中的脚本
打开images目录，将一个显示按钮的图标math.gif（1kb,17*14大小）放入。
[本文禁止转载，如有需稿请联系本人iuprg,[email protected]]
以下为实现代码（部分代码略去）
[xhtml] view plain copy
- -----------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-------
[javascript] view plain copy
- ---------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"><!--
- var CKE=window.parent.CKEDITOR;
- //author iuprg,[email protected] 支持ie8,firefox3
- var getMathValue=function(spanHtml)
- {
- if (!spanHtml||spanHtml=='')return "";
- try{
- var d=CKE.dom.element.createFromHtml(spanHtml);
- if (!d) return "";
- if (d.getChildCount()<=0)return "";
- var _eq_ = /eq=(['"])[^'"]*/1/s*/ig;
- var _value_= /(['"])[^'"]*/1/s*/ig;
- //...处理公式，以便显示出来
- var result=_value[0].substring(1,_value[0].length-2);
- return result;
- }
- return "";
- }catch(e){
- return "";
- }
- }//function
- var oEditor= CKE.dialog.getCurrent().getParentEditor();
- var oDOM = oEditor.document;
- var oSelection = CKE.dialog.getCurrent().getSelectedElement();
- var DisplayHtml;
- var srrval;
- var spanval;
- var mathval;
- var loadSelection=function(){
- var _html;
- try{
- _html=oSelection.$.outerHTML;//获得当前公式的值
- var _value=getMathValue(_html);
- document._webeq_popup.setMathML(_value);
- }catch(e){};
- }
- // --></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'><!--
- loadSelection();
- // --></mce:script>
- </body>
- </html>
------------plugin.js--------------------------
[javascript] view plain copy
- /**本插件面向ckeditor3.2.1*/
- /**详细API参考 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html */
- /**author:iuprg [email protected]*/
- 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,[email protected]
