从FCKEDITOR到ckeditor2.docx

从FCKEDITOR到ckeditor(二)-撰写自定义对话框,增加数学公式(与webEq的结合)收藏本文禁止转载，如有需稿请联系本人iuprg,ckeditor3.2.1自定义对话框+自定义工具按钮,增加数学公式(与webEq的结合)关键字:ckeditor,webeq,自定义按钮说明：给ckeditor增加一个按钮，可以在弹出的对话框中输入webeq的数学公式并且插入到当前编辑器中版本：webeq3.7+ ckeditor3.2.1测试环境：IE8,IE6.0正常fireFox3.5下公式显示不出来（哪位达人解决此问题，请email告之，谢谢）本文禁止转载，如有需稿请联系本人iuprg,有幸要用编辑器并且要求可以插入公式，就琢磨了琢磨，旧版的Fckeditor是指望不上了，代码完全不一样。下面我把经过简明扼要地叙述一下，和大家一起分享，也算是抛砖引玉吧。步骤：-打开ckeditor目录 plugins,新建立一个math目录里面的文件是:blank.html/空白math.html/对话框里iframe里调用的的主文件plugin.js/插件加载的脚本，主要是创建公式输入对话框以及插入新公式到editor中的脚本打开images目录，将一个显示按钮的图标math.gif（1kb,17*14大小）放入。本文禁止转载，如有需稿请联系本人iuprg,以下为实现代码（部分代码略去）view plaincopy to clipboardprint?1. -blank.html-2. 3. 4. 5. ButtonProperties6. 7. 8. 9. 10. 正在加载公式11. 12. 13. -math.html-view plaincopy to clipboardprint?1. -math.html-2. 3. 4. 5. ButtonProperties6. 7. !-8. varCKE=window.parent.CKEDITOR;9. /authoriuprg,支持ie8,firefox310. vargetMathValue=function(spanHtml)11. 12. if(!spanHtml|spanHtml=)return;13. try14. vard=CKE.dom.element.createFromHtml(spanHtml);15. if(!d)return;16. if(d.getChildCount()46. 47. 48. 51. 52. 53. 54. 57. 58. -plugin.js-view plaincopy to clipboardprint?1. /*本插件面向ckeditor3.2.1*/2. /*详细API参考/ckeditor_api/symbols/CKEDITOR.dialog.html*/3. /*author:*/4. CKEDITOR.plugins.add(math,5. requires:dialog,fakeobjects,6. init:function(editor)7. 8. editor.addCss(9. img.cke_mediaembed+/这个不需要10. +11. +12. +13. background-position:centercenter;+14. border:1pxsolid#a9a9a9;+15. width:80px;+16. height:80px;+17. 18. );19. /增加按钮20. editor.addCommand(math,newCKEDITOR.dialogCommand(math);21. editor.ui.addButton(EMath,22. 23. label:EMath,24. command:math,25. icon:this.path+images/math.gif26. );27. CKEDITOR.dialog.add(math,function(editor)28. 29. return30. title:公式,31. minWidth:700,32. minHeight:230,33. contents:34. 35. id:tab1,36. label:FirstTab,37. title:FirstTab,38. elements:/*页面元素*/39. 40. 41. id:pagetitle,42. width:100%,43. type:html,/这里是按钮按下以后调用显示的页面，这里使用一个自定义html44. html:+45. +48. 49. ,50. id:_dialog,51. type:text,52. hidden:true53. 54. 55. 56. ,57. onOk:function()/*确定按钮:按下后将公式插入到ckeditor*/58. 59. varsetMathValue=function(spanHtml,mathValue)60. vard=CKEDITOR.dom.element.createFromHtml(spanHtml);61. vare=CKEDITOR.dom.element.createFromHtml(d.getChildren().getItem(0).getOuterHtml();62. .63. .64. return_html;65. returnspanHtml;66. /function67. 68. varoSelection=this.getSelectedElement();69. varoFakeImage;70. if(oSelection!=null)71. oFakeImage=oSelection;72. if(oFakeImage)73. /获取公式74. try75. 76. /选中公式77. 78. catch(e)79. 80. ;81. 82. 83. 84. /*形成公式*/85. varhidden=;86. varmml_string=;87. varoMath;88. if(CKEDITOR.env.ie)oMath=document.math_frame._webeq_popup;else89. oMath=document.all.math_frame.contentDocument._webeq_popup;90. 91. try92. 93. mml_string=oMath.getMathML();/显示当前的内容94. 95. catch(e)96. 97. if(mml_string.length=0)98. 99. alert(公式编辑器初始化错误，请检查浏览器安全设置！);100. returnfalse;101. 102. 103. varhidden=;104. /这里可以调用undo105. /处理以及过滤106. DisplayHtml=形成公式.107. varooo=CKEDITOR.dom.element.createFromHtml(DisplayHtml);108. editor.focus();109. editor.insertHtml(hidden);110. /插入当前元素到ckeditor111. editor.insertElement(ooo);112. editor.insertHtml(hidden);113. 114. 115. ,116. onLoad:function()117. /todo118. 119. ,120. onShow:function()121. 122. if(CKEDITOR.env.ie)123. document.math_frame.location.href=./ckeditor/plugins/math/math.html;124. else125. 126. document.all.math_frame.src=./ckeditor/plugins/math/math.h