数理化公式KityFormula插件

项目要求：需要将 数理化公式公式插件 放入 Simditor编辑器，实现 公式 插入 编辑器

解决思路：A、先获取SVG（因为数理化公式公式插件  最后结果会生成  SVG格式）

                  B、将 SVG 转 base64格式的图片，然后插入编辑器

注：KityFormula的链接地址 要保证 与当前项目处于同一域名

学习网址：http://ueditor.baidu.com/website/kityformula.html

下载网址：http://ueditor.baidu.com/download/kityformula-plugin.zip

介绍
Kity Formula 为您提供公式表达式解析，可视化公式编辑，公式完美展示于一身的web端的整体解决方案。

KityFormula 包括：KityFormula-editor，KityFormula-parser 和 KityFormula-render。

简单

Kity Formula 为你提供了一个非常简单的公式呈现和存储方案。

你可以选择 Kity Formula 的附属项目中提供的解析器来完成各种公式表示法到可视化公式的转换， 如果这样做，你不用再在服务器端存储各种公式的图片或者其他的相关资源，仅仅只需要一个字符串， Kity Formula 就会为你呈现出完美的公式。

你也可以直接使用 Kity Formula 以编程的方式来构建一个公式，这种方式更加灵活，也可以根据这种方式开发出适合自己的解析器。

高效

Kity Formula 利用浏览器的原生支持来渲染公式，以此保证了渲染的高效性。同时，Kity Formula 所使用的底层图形库Kity Graphic Lib 也对客户端的渲染做了很多优化，保证了上层应用的运行效率。

灵活

Kity Formula 提供了灵活的接口和高层抽象，可以帮助你以极小的成本进行扩展。

美观

Kity Formula 内嵌了一套基本字符集和扩展字符集，使得渲染出来的公式具有最佳的外观，同时也保证了在任何客户端下获得了一致的体验效果。

自然

Kity Formula 的代码书写方式非常自然，允许你以具有数学意义的方式去书写公式，同时也允许你以其他更加复合你的方式书写。

跨平台

Kity Formula 使用的是浏览器原生的技术，比依赖于任何其他插件；对于多平台上的差异也通过其底层图形库来抹平差异，达到了跨平台运行的目的。

轻量

Kity Formula 只需要引入一个独立的JS文件就可以正常运行于各个平台，并且无需繁琐的配置。

实际操作

1、下载 KityFormula 后，将下载文件放在静态文件夹目录下

（图1）

（图2）

2、将 KityFormula的链接地址放入 iframe

      注：KityFormula的链接地址 要保证 与当前项目处于同一域名

（图3）

（图4）

（图5）

3、获取 KityFormula 的 SVG

（图6：可以通过window.kfe取值）

（图7：获取SVG[一定要加XXX.outerHTML]）

（图8：效果图）

4、将 SVG 转 base64格式的图片，然后插入编辑器

（图9）

（图10：效果图）

5、具体代码

//确定按钮

iFormulaModalObj.off("click",".modal .btn-primary").on("click",".modal .btn-primary",function(){

    var iFormula = document.getElementById('iFormulaIframe'); //通过contentWindow获取ifame子页面的window窗体对象。(不允许跨域名访问)

    var win = iFormula.contentWindow; //获取“数理化公式插件”的svg

    var iFormulaSVG_1 = win.kfe.container.childNodes[1].childNodes[0].childNodes[0];

    var iFormulaSVG_2 = iFormulaSVG_1.outerHTML; //添加svg转base64格式的图片

    var svgImg = document.createElement('img');

    svgImg.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(iFormulaSVG_2)));//给图片对象写入base64编码的svg流

    //设置图片大小

    //将生成的base64格式图片传递给编辑器

    thisObj.closest(".simditor").find(".simditor-body").html(svgImg);

    iFormulaModalObj.html("");

});