UEditor 公式插件

UEditor的公式插件是基于 KityFormula 开发的，为用户真正实现了所见即所得的公式编辑方式，并可以在前端生成图片，无须后端引入庞大的公式解析库，并且该库对所有现代浏览器都有良好的支持。集成该插件能够极大的拓展 UEditor 对于公式的支持。

插件下载地址：

http://ueditor.baidu.com/download/kityformula-plugin.zip

UEditor 公式插件目录说明：

• kityformula -- kityformula 引用库
• addKityFormulaDialog.js -- 弹出对话框的配置文件
• defaultFilterFix.js -- 覆盖 UEditor 过滤 base64 的 js （因 UEditor 会过滤掉内容中的 base64 元素）
• getKfContent.js -- 在进行 submit 操作时，将 src 为 base64 的图片提交到后台，并返回图片的实际地址
• kf-icon.png -- 插件在工具栏上显示的图标
• kityFormulaDialog.html -- 弹出对话框的页面

UEditor 公式插件使用方法：

1. 将 kityformula-plugin 拷贝至 UEditor 根目录（本例以根目录为例，也可以是其他的目录），在编辑器页面引入js文件

   
       
       
   <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/addKityFormulaDialog.js"></script>
   <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/getKfContent.js"></script>
   <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/defaultFilterFix.js"></script>

2. 在工具栏增加 kityformula 图标

      
      
   var ue = UE.getEditor('editor', {
       toolbars: [[
           'fullscreen', 'source', '|',
           'bold', 'italic', 'underline', '|', 'fontsize', '|', 'kityformula', 'preview'
       ]]
   });

   如果不需要提交到后台，那么到这一步，kityformula 插件功能已经可以使用了。
3. 如果需要进行提交操作，那么就要将 UEditor 放在一个 form 表单当中，并给 UEditor 加上 name 属性，以便于后台获取到内容，详细内容可参见 UEditor 的帮助文档。

      
      
   <form action="getContent.php" id="form" method="post">
       <script id="editor" type="text/plain" name="content" style="width:1024px;height:500px;"></script>
   </form>

4. 接着在 submit 事件做一下处理，使得在 submit 内容提交之前，将所有的 base64 编码的图片上传到后台目录，将返回的实际图片地址替换掉 base64 编码的图片。下面就以 UEditor 的两种表单提交方式（普通的表单提交和 js 提交）为例，说明一下实际中使用方法：

      
      
   var form = document.getElementById('form');
    
   form.onsubmit = function(){
       kfSubmit();
       return false;
   };
    
   var kfSubmit = function(){
       ue.getKfContent(function(content){
           form.submit();
       })
   }

   上面的代码修改了表单的 onsubmit 函数，其中 kfSubmit() 函数可以用于 js 提交表单。在html代码的 submit 按钮和普通按钮的写法如下：

      
      
   <input type="submit" value="通过input的submit提交" />
   <button onclick="kfSubmit()">通过js调用submit提交</button>

具体请参见下文：

http://ueditor.baidu.com/website/kityformula.html

让我们一起遨游在代码的海洋里！