bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新

jopen 6年前

bootstrap-wysiwyg是一个十分精简已用的文本框插件,但是它有一个缺点,默认的插入图片并预览是用 FileApi实现的,尽管它会将图片转化为字符串,但是存进数据库会十分庞大。本文尽量在不破坏bootstrap-wysiwyg原有架构的基础上对源码实施改写,达到实时上传的目的。

笔者最近由于项目需求,要实现一个前端文本编辑框,附带图片上传实时查看的功能。比较了网上的几款插件,首先是百度的UEitor,笔者发现该框架过于庞大,一个小框架引入如此多的文件并不是我想看到的;其次是jQuery的easyUI,虽然个人版的是免费的,但是项目属于公司业务,似乎用商业版的框架并不妥。考虑到笔者项目的前端主要就是在bootstrap的基础上构建起来的,我最终选用了bootstrap-wysiwyg插件,它非常的精简,轻巧而且扩展性强。

引入bootstrap-wysiwyg并且实现文本编辑功能十分的便捷,但是,我注意到,图片上传是用fileapi实现的。对于大多数网站,虽然用FileApi实现无上传预览用户体验非常好,但是真正存入数据库的时候,我们还是希望能够存储图片的在服务器的静态路径,而并非字符串化的图片。简而言之,我们需要对bootstrap-wysiwyg(以下简称WY)做稍许改写。

首先我们来观察下页面上图片控件,其它的控件略过,查一下源码,很容易发现如下代码:

<div class="btn-group">   <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn">   <i class="icon-picture"></i></a>          <input type="file" data-role="magic-overlay"               data-target="#pictureBtn"       data-edit="insertImage" />  </div>


做一下说明,data-role,data-target属性是bootstrap中预定义的事件,在这里我们可以理解为布局相关,不用考虑。关键点来了,第三个属性data-edit,bootstrap中并没有这一事件,观察bootstrap-wysiwyg.js,可以发现这样一些代码:

toolbar.find('input[type=file][data-' + options.commandRole + ']')       .change( ...       ...  commandRole : 'edit',


也就是说,该属性其实是为了方便选择器而实现的,相当于给图片按钮添加了监听器事件。

我们接着研究一下WY图片预览的实现,第一步,就像上面代码展示的一样,监听器捕捉到fileInput的change事件,做出响应,调用insertFiles函数

restoreSelection();  if (this.type === 'file' && this.files && this.files.length > 0) {   insertFiles(this.files);  }  saveSelection();  his.value = '';


找到insertFiles函数

insertFiles = function (files) {      editor.focus();      $.each(files, function (idx, fileInfo) {       if (/^image\//.test(fileInfo.type)) {        $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {         execCommand('insertimage', dataUrl);        }).fail(function (e) {         options.fileUploadError("file-reader", e);        });       } else {        options.fileUploadError("unsupported-file-type", fileInfo.type);       }      });     }


我们注意到它使用了jQuery的$.Deferred()方法,先调用了一个readFileIntoDataUrl方法,成功之后通过自封装的execCommand方法实现将图片输出到文本框。该图片其实就是一个<img>标签,只不过src属性是用字符串表示的图片。所以我们要做的其实是在监听器触发之后,将文件上传,获得图片的src,再把链接交给之后的execCommand方法。

由于笔者对Deferred并不是特别熟悉,所以还是采用更为通常的callback模式

观察ajaxFileUpload的调用方式:

$.ajaxFileUpload({      url : ...,      secureurl : false,      fileElementId : ...,      dataType : "json",      success : function(obj) {       ...      },      error : function() {       ...      }     });


有两个必选的属性,url和fileElementId,为了保持依赖的正确性,重写ajaxFileUpload是不可取的。但是由于WY的控件是监听器实现的,所以通过函数将参数传过去是不现实的,所以我们需要自己对输入框定义一些属性来达到目的。

在fileInput中添加一些属性

<input type="file" id="pictureInput" name="picture"       data-role="magic-overlay" data-target="#pictureBtn"       data-edit="insertImage" action="..." />


id 用作 fileElementId,name属性也是必须的,主要是为了后台取值指名,action是图片需要提交到的url

在bootstrap-wysiwyg.js中定义一个函数名为uploadFileToServer,函数格式如下:

var uploadFileToServer = function(id, action, callback) {    $.ajaxFileUpload({     url : action,     secureurl : false,     fileElementId : id,     dataType : 'json',     success : function(obj) {      if (obj.status) {       callback(obj.imgsrc);      } else       options.fileUploadError("server-internal-exception",         obj.message);     },     error : function() {      options.fileUploadErroe("upload-failure", "");     }    });


将insertFiles方法作改写如下:

insertFiles = function(files, id, action) {     editor.focus();     $.each(files, function(idx, fileInfo) {      if (/^image\//.test(fileInfo.type)) {       /*        * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) {        * execCommand('insertimage', dataUrl); }).fail(function(e) {        * options.fileUploadError("file-reader", e); });        */       uploadFileToServer(id, action, function(src) {        execCommand('insertimage', src);       });      } else {       options.fileUploadError("unsupported-file-type",         fileInfo.type);      }     });


同时对监听器做出一定的修改,以便拿到必要的属性

toolbar.find('input[type=file][data-' + options.commandRole + ']')      .change(       function() {         restoreSelection();          if (this.type === 'file' && this.files            && this.files.length > 0) {           insertFiles(this.files, $(this).attr('id'),             $(this).attr('action'));          }          saveSelection();          this.value = '';         });


主要是增加了两个参数位置。

如此,改写便完成了,注意,要确保正确执行,请在控件之前引用ajaxFileUpload.js