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

uploadPic1494745828786.png

配置好后最终效果：

uploadPic1494746309652.png

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

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

我们可以这样配置：

===在html文档中添加

===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