ueditor项目实践-kityformula公式插件篇

上一篇中，已经介绍了如何把ueditor引人项目，以及如何通过改造ueditor的脚本来达到控制图片上传路径和上传服务器的目的。这一篇趁热打铁，简单说一说kityformula公式插件如何集成到你项目中的ueditor中。

首先看一看官方文档中是如何集成的，请参考 http://ueditor.baidu.com/website/kityformula.html 

官方文档已经详细介绍了 UEditor 公式插件使用说明，这里不再赘述，我这里实现的主要与其不同之处在于 form提交的实现逻辑和后台公式图片的存储路径以及调用的自己的图片上传处理方法，这里参考了上一篇介绍的图片上传插件的图片上传思想。


1、 公式图片会在ueditor所在的form提交时，先进行上传；
找到kityformula插件文件下的 getKfContent.js，找到以下方法
/*
 * getKfContent : 将image的src从base64替换为文件名
 * param : callback -- 回调函数 其参数为替换之后的内容
 * return : void
 * */

UE.Editor.prototype.getKfContent = function(callback)；

这个方法里面14行是公式图片的上传路径
url = UE.utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
改成
url = UE.utils.formatUrl(me.options.projectBase + me.options.scrawlUploadUrl);
其中 me.options.projectBase和me.options.scrawlUploadUrl是在 config.json中自定义的配置参数，这个根据你自己项目的情况配置
(1) me.options.projectBase表示项目的根路径 在配置文件中配的 "projectBase": "/test",   其实就是localhost:8080/test
(2)me.options.scrawlUploadUrl表示图片的上传路径 在配置文件中配的"scrawlUploadUrl": "/course/createCourse/saveCoverImg", /* 图片上传路径 */


2、 然后根据上传图片方法的回调，将图片的访问路径放到富文本编辑器中；
找到33行的 opt.onsuccess = function(xhr){//ajax执行成功的回调函数
这个函数里面 
将35行的 
url = me.options.scrawlUrlPrefix + json.url;、
改成自己的
url = me.options.projectBase + me.options.imageUrlSuffix;//图片访问路径
(1) me.options.projectBase表示项目的根路径 在配置文件中配的 "projectBase": "/test"   其实就是localhost:8080/test

(2)me.options.imageUrlSuffix是调用的配置文件中的我自定义的变量  "imageUrlSuffix": "/file/show?fileId=", /* 图片访问路径后缀 */

(3)json.pid 表示图片的存储id，因为我的图片的访问路径是这样的 /file/show?fileId=imid; 
所以这里你根据自己的后台返回值和图片访问地址来构造就行了

3、 整个form提交前，先进行公式图片上传和回写图片显示地址的操作。我的脚本如下：

 //初始化富文本框
  var ue = UE.getEditor('editor', {
      toolbars: [[
          'fullscreen', 'source', '|','undo','redo','|','bold', 'italic', 'underline','strikethrough',
          '|', 'superscript', 'subscript','|', 'forecolor', 'backcolor','|', 'removeformat', '|',
          'insertorderedlist', 'insertunorderedlist', '|', 'selectall', 'cleardoc', 'paragraph', '|', 
          'fontfamily', 'fontsize','|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
           '|','link', 'unlink', '|','simpleupload', '|','horizontal', 'date', 'time', 'spechars',  '|',
          'inserttable', 'deletetable','|','map','|', 'print', 
           '|','kityformula', 'preview'
      ]],
      elementPathEnabled: false,
      wordCount: false
  });
var form = document.getElementById('editForm');//换成自己form的id 


 //点保存按钮触发
function saveEditedQuestion(){
kfSubmit();//先保存公示图片并返回地址
}
//公式图片上传操作
var kfSubmit = function(){
    ue.getKfContent(function(content){
    questionSave();//富文本公式图片上传返回真实地址后再提交整个表单
 })


//自己业务form提交方法
function questionSave(){
   .................
   //自己业务的form提交逻辑
}




好了，就到这里，再见吧！