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 公式插件使用方法:
- 将 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>
- 在工具栏增加 kityformula 图标
- var ue = UE.getEditor('editor', {
- toolbars: [[
- 'fullscreen', 'source', '|',
- 'bold', 'italic', 'underline', '|', 'fontsize', '|', 'kityformula', 'preview'
- ]]
- });
- 如果需要进行提交操作,那么就要将 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>
- 接着在 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();
- })
- }
- <input type="submit" value="通过input的submit提交" />
- <button onclick="kfSubmit()">通过js调用submit提交</button>
具体请参见下文:
http://ueditor.baidu.com/website/kityformula.html
让我们一起遨游在代码的海洋里!