summernote 上传文件插件

/ 0 评 / 阅读 653

公司管理后台的编辑器不好用,被公司运营缠着不放,要改。于是找了一圈,貌似summernote才好使一点。但这个编辑器没有上传功能,于是做了一个。我本来是写PHP后端的。。。

(function(factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(window.jQuery);
  }
}(function($) {

  $.extend($.summernote.options, {
    upload: {
      uploadUrl:'',
      token:'',
    }
  });

  // Extends plugins for adding hello.
  //  - plugin is external module for customizing.
  $.extend($.summernote.plugins, {
    /**
     * @param {Object} context - context object has status of editor.
     */
    'upload': function(context) {
      var self = this;

      // ui has renders to build ui elements.
      //  - you can create a button with `ui.button`
      var ui = $.summernote.ui;

      // add hello button
      context.memo('button.upload', function() {
        // create button
        var button = ui.button({
          contents: '<i class="fa fa-file-archive-o"/> 上传',
          tooltip: '上传图片,音频,视频等',
          click: function() {
            self.$panel.click()
          }
        });

        // create jQuery object from button instance.
        return button.render();
      });

      // This events will be attached when editor is initialized.
      this.events = {
        // This will be called after modules are initialized.
        'summernote.init': function(we, e) {
          //console.log('summernote initialized', we, e);
        },
        // This will be called when user releases a key on editable.
        'summernote.keyup': function(we, e) {
          //console.log('summernote keyup', we, e);
        }
      };

      // This method will be called when editor is initialized by $('..').summernote();
      // You can create elements for plugin
      this.initialize = function() {
        this.$panel=$('<input type="file" multiple>').css({'display':'none'});
        this.$panel.change(function(){
          var $this=$(this);
          var files=$this[0].files;
          console.log('files',files);
          for(var i =0;i<files.length;i++){
            var fd=new FormData();
            var file=files[i];
            console.log(file);
            fd.append('file',file);
            fd.append('_token',context.options.upload.token);
            $.ajax({
              url: context.options.upload.uploadUrl,
              type: 'POST',
              cache: false,
              data: fd,
              processData: false,
              contentType: false,
              success:function(res){
                console.log(res);
                if(res.status){
                  var fileType=file.type.split('/');
                  switch (fileType[0]) {
                    case 'image':
                      context.invoke('editor.insertImage', res.data.src);
                      break;
                    case 'audio':
                      var audio=document.createElement('audio');
                      audio.src=res.data.src;
                      audio.controls=true;
                      context.invoke('editor.insertNode', audio);
                      break;
                    case 'video':
                      var video=document.createElement('video');
                      video.src=res.data.src;
                      video.controls=true;
                      video.style.height='auto';
                      video.style.maxWidth='100%';
                      context.invoke('editor.insertNode', video);
                      break;
                    default:
                      context.invoke('editor.createLink', {url:res.data.src,text:file.name});
                  }
                }
              },
              error:function(){

              },
              complete:function(){
                $this.val('')
              }
            });
          }
        });
      };

      // This methods will be called when editor is destroyed by $('..').summernote('destroy');
      // You should remove elements on `initialize`.
      this.destroy = function() {
        this.$panel.remove();
        this.$panel = null;
      };
    }
  });
}));

插件的上传参数配合了公司的laravel框架,用的时候注意修改。

$.extend($.summernote.options, {

    upload: {

      uploadUrl:'',

      token:'',

    }

  });

这里可以修改传入参数

var fd=new FormData();

var file=files[i];

console.log(file);

fd.append('file',file);

fd.append('_token',context.options.upload.token);

这里是ajax的上传参数。

summernote的文档

发表评论

电子邮件地址不会被公开。 必填项已用*标注