Quill-1.3.5富文本编辑器上传图

富文本编辑器是网站常用的一种工具，若是自己开发一个编辑器，无疑成本太高，对于我而言，自身技术能力太弱，我无从下手啊啊~~！(┬＿┬)

这几天研究富文本编辑器，先后看了Ueditor、Simditor、WYSIWYG、KindEdit、Quill等开源的代码。

最后决定选用Quill，花了半天时间研究，始终对上传图片不太满意，如Simditor、Quill等，这些编辑器的把图片村尾BASE64，不利于数据存储。所以，我用FormData方法，通过ajax提交图片到后台，下面是我修改Quill-1.3.5的源码：

uploadPic1494745449441.png

===在quill.js搜索 image: fnuction找到7216-7223行，屏蔽

从7224行开始添加以下代码：

 var oupFile=fileInput.files;
                        var data = new FormData();
                        for (var i=0;i<oupFile.length;i++){
                          data.append('uploadPic', oupFile[i]);
                        }
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", '/uploadPic.do', true);
                      xhr.onreadystatechange = function(){
                        if ( xhr.readyState == 4 && xhr.status == 200 ) {
                          var imgUrl=JSON.parse(xhr.responseText);
                          var range = _this3.quill.getSelection(true);
                          if (imgUrl.type==0){
                            console.log('图片大小应该小于1M');
                          }
                          for(var i=0; i<imgUrl.filePath.length; i++){
                            _this3.quill.updateContents(new _quillDelta2.default().retain(range.index).delete(range.length).insert({ image: imgUrl.filePath[i] }), _emitter2.default.sources.USER);
                          }
                          fileInput.value = "";
                        }
                      }
                      xhr.timeout = 100000;
                      xhr.ontimeout = function(event){
                        console.log(event,'请求超时！');
                      }
                      xhr.send(data);

uploadPic1494745828786.png

配置好后最终效果：

uploadPic1494746309652.png

ajax的方法就不用我说了吧。

对了，最重要的就是Quill的使用了，大家可以看看官方文档https://quilljs.com。

我们可以这样配置：

===在html文档中添加

<div id="quillEditor"></div>

===script添加：

var quill = new Quill('#quillEditor', {
    modules: {
      'formula': true,
      'syntax': true,
      'toolbar': [
        [{ 'font': [] }, { 'size': [] }],
        [ 'bold', 'italic', 'underline', 'strike' ],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'script': 'super' }, { 'script': 'sub' }],
        [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
        [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
        [ {'direction':'rtl'}, { 'align': [] }],
        [ 'link', 'image', 'video', 'formula' ],
        [ 'clean' ]
      ],
    },
    placeholder: '请在这里输入...',
    theme: 'snow',
  });

若有不明白的，大家可以私信我的新浪微博@我友几个逗逼 ，我们一起学习

各位网友们有更好的方法，请不吝赐教！

_over