UEditor 公式插件 Demo

UEditor 公式插件简介:

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

UEditor 公式插件下载:

点击下载

UEditor 公式插件使用说明:

UEditor 公式插件实现原理:

UEditor 公式是基于 KityFormula 开发,KityFormula 库支持可视化方式输入公式,并能生成 base64 为 image 数据插入到编辑器当中,当需要进行 submit 操作的时候,预先将 base64 的数据上传到后台并返回实际的 png 地址,当所有的公式图片都完成转换之后再进行真正的 submit 操作。因为传到后台返回实际地址的过程使用了 UEditor 的涂鸦功能的后台,因此需要用户在使用的时候包含涂鸦模块。

UEditor 公式插件目录说明:

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>
    
    到了这一步,所有的步骤都已经完成了,Enjoy it!