KindEditor富文编辑器集成kityformula数学公式

最近做着个考试的项目，有要求数学公式的题目，原来这个项目是使用kindEditor的就不想换了，我看了一下在网上的都是使用jmeditor公式编辑器，但是发现了比较严重的BUG，果断的放弃了，转用kityformula，原来是不支持 kindEditor的，以下是我改造的过程。

我使用的是kindEditor 4.13 在线HTML编辑器

kityformula

1、复制kitformual到kindEditor/plugin的目录下面

2、修改kindeditor-all-min.js（这是我在项目中引用的文件，所以我修改这个），在itmes下面增加 "kityformula"

3、复制kityformula/icons/kityformula.png到kindEditor/themes/default目录下

4、修改default.css 增加

.ke-toolbar .ke-icon-kityformula {width: 16px;height: 16px;background: url(kityformula.png) 0 0  no-repeat;
}

5、在kityformula目录下新建一个kityformula.js并修改

KindEditor.plugin("kityformula", function(e){var self = this, name = 'kityformula';var jme_fid = "kityformula_" + Math.ceil(Math.random()*100) ;self.clickToolbar(name, function() {var dialog = self.createDialog({title : '插入公式',width : 785,height :390,onShow:function(){alert('hahaha');},yesBtn:{name:"保存",click:function (e) {var ifr = document.getElementById(jme_fid).contentWindow.onok(self);setTimeout(function () {self.hideDialog().focus();},100);return true;}},body:'<div style="width:800px;height:600px;">' +'<iframe id="'+jme_fid+'" style="width:785px;height:390px;" frameborder="no" src=" '+ KindEditor.basePath + 'plugins/kityformula/kityFormulaDialog.html"></iframe></div>'});});});function getIFrameDOM(fid){var fm = getIFrame(fid);return fm.document||fm.contentDocument;
}function getIFrame(fid){return document.getElementById(fid)||document.frames[fid];
}

6、修改kityformula目录下的kityFormulaDialog.html

将原来的代码注析掉，由于在kindEditor下是使用iframe调用的，需要配置与子页面通讯的方法

<script>var factory, kfe = null;$(function () {$( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );window.k = {init:function () {$( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );return new Promise(function (resolve) {if(kfe == null){factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {render: {fontsize: 24},resource: {path: "./kityformula/resource/"}} );factory.ready( function ( KFEditor ) {$( "#tips").remove();this.execCommand( "render", null || "\\placeholder" );this.execCommand( "focus" );kfe = this;resolve(kfe);});}else{resolve(kfe);}});} ,setMessage :function() {try {kfe.execCommand( "render", sessionStorage.getItem('latex') || "\\placeholder" );sessionStorage.setItem("latex", "");}catch (e) {setTimeout(function() {k.setMessage();},200)}},onok:function (editor) {kfe.execCommand('get.image.data', function(data){var latex = kfe.execCommand('get.source');editor.insertHtml('<img class="kfformula" style="vertical-align: middle;" src="'+ data.img +'" data-latex="' + latex + '" />');$( "#tips").remove();return true;});return false;},};k.init().then(function (kfe) {k.setMessage();});});function setlatex(imgLatex){try {window.kfe.execCommand( "render", imgLatex || "\\placeholder" );window.kfe.execCommand( "focus" );}catch (e) {}}function onok(editor){k.init().then(function (kfe) {k.onok(editor);});}// jQuery( function ($) {//     if ( document.body.addEventListener ) {//         $( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );////         var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {//             render: {//                 fontsize: 24//             },//             resource: {//                 path: "./kityformula/resource/"//             }//         } );////         factory.ready( function ( KFEditor ) {////             $( "#tips").remove();//             this.execCommand( "render", null || "\\placeholder" );//             this.execCommand( "focus" );////             window.kfe = this;////         } );////         onok = function(editor){//             kfe.execCommand('get.image.data', function(data){//                 var latex = window.kfe.execCommand('get.source');//                 //editor.insertHtml('<img class="kfformula" style="vertical-align: middle;" src="'+ data.img +'" data-latex="' + latex + '" />');//                 $( "#tips").remove();////                 //return true;//                 return '<img class="kfformula" style="vertical-align: middle;" src="'+ data.img +'" data-latex="' + latex + '" />';//             });//             return false;//         }////         //解决第一次赋值失败的问题//         let setMessage =  () => {//             try {//                 window.kfe.execCommand( "render", sessionStorage.getItem('latex') || "\\placeholder" );//                 sessionStorage.setItem("latex", "");//             }catch (e) {//                 setTimeout(() => {//                     setMessage()//                 },200)//             }//         }//         setMessage();//////     } else {//         $( "#tips").css( "color", "black" );//         $( "#tips").css( "padding", "10px" );//     }//// } );
</script>

我在这里构建了与父页面通讯的方法

这样就可以在iframe父页面调用了

7、完成后看下效果

kityformula是采用img返回，插件已经将公式转换成base64的图片返回，所以在编辑器上面会看到是图片来的

8、要记得在kindEditor/lang/zh-CN.js增加

kityformula : '数学公式'

这样的完成了，感觉比原来的jmeditor好用

KindEditor富文编辑器集成kityformula数学公式相关推荐

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
django 与百度 ueditor 富文本编辑器集成
django 是基于 python 的一个很好的web开发框架.ueditor 是百度开源的一个富文本编辑器.有很好的用户体验,很适合中国人使用的一个编辑器. 在使用ueditor 之前,我集成过 f ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
kindEditor 富文本编辑器使用介绍
第一版:存放位置: ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <s ...

KindEditor富文编辑器集成kityformula数学公式

KindEditor富文编辑器集成kityformula数学公式相关推荐

最新文章

热门文章