公司管理后台的编辑器不好用，被公司运营缠着不放，要改。于是找了一圈，貌似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的上传参数。