The vue-quill-editor rich text editor is used in the project
Brief introduction:
　　Quill based, rich text editor for Vue2 supports server-side rendering and single page applications.
Demo Page
Sum up:
　　1. in general, simple and easy to use.
　　2. you can customize the Option toolbar looks good to use

But the pictures used in the project were uploaded. Use this plugin directly. There was no problem. But the backstage couldn't stand it, and the pictures were encoded by base64. Background pictures are limited. Helpless, just want to solve the problem. Fortunately, the background provides an interface, the picture to URL, so good, first the picture to URL, in the rich text editor inside it is not OK?.

The reason is so simple, practice is really another matter.

容我裝逼一把，哈哈，中文用戶還是看下面吧。

項(xiàng)目中使用了 vue-quill-editor 富文本編輯器
簡介：
　　基于Quill、適用于Vue2的富文本編輯器，支持服務(wù)端渲染和單頁應(yīng)用。
Demo Page
總結(jié)：
　　1.總的來說簡潔好用。
　　2.可以自定義Option toolbar貌似很好用的樣子

但是項(xiàng)目中使用到了圖片上傳。直接使用這個(gè)插件。完全沒問題。但是后臺(tái)受不了了，傳過去的圖片是base64編碼。后臺(tái)圖片做了限制。無奈只好想辦法解決唄。好在后臺(tái)提供了個(gè)接口，將圖片轉(zhuǎn)為URL，這樣好啊，先把圖片轉(zhuǎn)為URL，在放到富文本編輯器里面不就行了嗎。

道理是這么簡單，實(shí)踐確是另一回事。

問題一 怎么添加自定義的button。

demo中也提供了。

 <button type="button" @click="customButtonClick">img</button>

什么 img 太丑了，那就是用字符圖標(biāo)(Glyphicons 字體圖標(biāo))

   <button type="button" @click="customButtonClick"><i class="glyphicon glyphicon glyphicon-picture"></i></button>

問題二 怎么打開file 選擇圖片。

這個(gè)一開始想著是自定義個(gè) <input type="file" class="ql-image"/>
　　圖標(biāo)太丑。
　　class="ql-image" 放在上面button中 雖然好看，可以打開獲取圖片，但是還是base64不走自定義方法。放在input中沒卵用。

該怎么實(shí)現(xiàn)那，其實(shí)也不難

 <input type="file" class="custom-input" @change='upload' style='display: none !important;'>

直接放個(gè)隱形的input就解決了。貌似很牛逼的樣子

然后在 upload中寫方法 調(diào)接口實(shí)現(xiàn) Base64到url 的完美過度

最后才是重點(diǎn)：

------------------------------------------分割線-------------------------------------------------------
以下僅做參考

問題三 獲取到了imgUrl后怎么插入到文檔中。

最開始參考的是這位仁兄的回答
　　但是放到customButton中是獲取不到 this.$refs.myTextEditor.quillEditor更別說.getSelection();這個(gè)方法了。
　　因?yàn)樽远x的按鈕是獲取不到 quill 的。
　　這個(gè)方法放到

 onEditorChange({editor, html, text}) {
//        console.log('editor change!', editor)
       console.log('editor change!', editor.getSelection())
    },
這樣是好用的

那我該怎么辦那 馬丹 自己太機(jī)智了，有點(diǎn)投機(jī)取巧的做法

放大招了直接上代碼

    <quill-editor ref="myTextEditor"
                              v-model="content"
                              :options="editorOption"
                              @focus="onEditorFocus($event)"
                              @ready="onEditorReady($event)"                 
                >
                  <div id="toolbar" slot="toolbar">
                    <button class="ql-bold">Bold</button>
                    <button class="ql-italic">Italic</button>
                    <select class="ql-size">
                      <option value="small"></option>
                      <option selected></option>
                      <option value="large"></option>
                      <option value="huge"></option>
                    </select>
                    <!-- Add subscript and superscript buttons -->
                    <!--<button type="button" class="ql-image"></button>-->
                    <button type="button" @click="customButtonClick">img</button>
                    <input type="file" class="custom-input" @change='upload' style='display: none !important;'>
                  </div>
                </quill-editor>

    data(){
      return {
        length: '',
        editor: {},
        editorOption: {
          modules: {
          //  imageImport: true,
          //  imageResize: {
          //    displaySize: true
         //   },
            toolbar: '#toolbar',
          }
        },
      }
  }
  methods: {
      onEditorFocus(editor) {
        this.editor = editor   //當(dāng)content獲取到焦點(diǎn)的時(shí)候就 存儲(chǔ)editor
      },
      onEditorReady(editor) {
        this.editor = editor //當(dāng)quill實(shí)例化完先 存儲(chǔ)editor
      },

      customButtonClick(){
        var range
        if (this.editor.getSelection() != null) { 
          range = this.editor.getSelection()
          this.length = range.index  //content獲取到焦點(diǎn)，計(jì)算光標(biāo)所在位置，目的為了在該位置插入img
        } else {
          this.length = this.content.length  //content沒有獲取到焦點(diǎn)時(shí)候 目的是為了在content末尾插入img
        }
        this.$el.querySelector('.custom-input').click();   //打開file 選擇圖片
      },


   upload(event){
        var reader = new FileReader();
        var img1 = event.target.files[0];
        reader.readAsDataURL(img1);
        var that = this;
        reader.onloadend = function () {
          //上傳圖片
          that.pushImg(reader.result, 1)
        }
      },

   pushImg(base64, type){   
        let self = this
        var json = {data: [{id: 0, content: base64}]}         
        api.pushImgToGeturl(json).then(function (res) { //這一塊可以忽略知識(shí)調(diào)接口獲取到 imgurl
          if (res.data.success) {
              self.contentImg = res.data.data[0].url.url    //獲取到了圖片的URL
              console.log(self.contentImg)          
              self.editor.insertEmbed(self.length, 'image', self.contentImg); // ★這里才是重點(diǎn)★ 插入到content中
          }
        })
      }
}

完事。
有什么問題可以共同探討。
或者有更好的方法，請(qǐng)告知，謝了。知識(shí)在于分享

最后翻閱了 那么多issues
最大的感觸是，英語是硬傷啊，學(xué)好英語是編程的基礎(chǔ)啊。

------------------------------------------分割線-------------------------------------------------------

這才是重點(diǎn)中的重點(diǎn)

這個(gè)問題GitHub上已經(jīng)做了修改。
所以說以上代碼就不用那么繁瑣了。僅做參考就行。

    computed: {
      editor() {
        return this.$refs.myTextEditor.quill
      }
    },
//應(yīng)該是quill，而非quillEditor

這樣就可以在 customButtonClick中獲取到

      customButtonClick(){
        console.log(this.editor)
      },

感謝@上善若水_3cd7的提醒。

            var range = self.editor.getSelection(true);
            var  length = range.index
            self.editor.insertEmbed(length, 'image', self.contentImg);

這樣就不需要土辦法了[捂臉]。直接在文中添加圖片。而不需判斷range.index

ok 感謝各位大神

路漫漫其修遠(yuǎn)兮吾將上下而求索的出處