從FCKEDITOR到ckeditor(二)----撰寫自定義對話框,增加數學公式(與webEq的結合)

[本文禁止轉載 ]

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,[email protected]

[本文禁止轉載]

從FCKEDITOR到ckeditor(二)----撰寫自定義對話框,增加數學公式(與webEq的結合)

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

從FCKEDITOR到ckeditor(二)----撰寫自定義對話框,增加數學公式(與webEq的結合)

[轉]Delphi指針的運用毫不遜色於C語言的指針

java-web-struts2-2.0-防止重複提交之設置-intercept

hibernate連接多個數據庫?----其實什麼也不用擔心

JAVA JNLP組件數字簽名製作步驟

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結