富文本編輯器是網(wǎng)站常用的一種工具，若是自己開發(fā)一個(gè)編輯器，無疑成本太高，對于我而言，自身技術(shù)能力太弱，我無從下手啊啊~~！(┬＿┬)

這幾天研究富文本編輯器，先后看了Ueditor、Simditor、WYSIWYG、KindEdit、Quill等開源的代碼。

最后決定選用Quill，花了半天時(shí)間研究，始終對上傳圖片不太滿意，如Simditor、Quill等，這些編輯器的把圖片村尾BASE64，不利于數(shù)據(jù)存儲。所以，我用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('圖片大小應(yīng)該小于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,'請求超時(shí)！');
                      }
                      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: '請?jiān)谶@里輸入...',
    theme: 'snow',
  });

若有不明白的，大家可以私信我的新浪微博@我友幾個(gè)逗逼 ，我們一起學(xué)習(xí)

各位網(wǎng)友們有更好的方法，請不吝賜教！

_over