從0.8開發一個vue的插件。

需求：在vue項目中使quill富文本編輯器支持圖片上傳功能。

思路：修改quill.js的從新編譯vue-quill-editor

1.在GitHub上下載quill.js 的源碼https://github.com/quilljs/quill

2.在本地新建myQuill項目。

　　從Quill的使用文檔中咱們知道了在實例化Quill時傳了兩個參數，一個是個選擇器第二個是配置參數options，

因此咱們將上傳文件的地址添加在配置參數options中，命名爲upload。

　　根據官網的例子在點擊圖片上傳按鈕時會插入input的文件域

　　因此咱們在qiull.js文件中搜索「image/png, image/gif, image/jpeg, image/bmp, image/x-icon」關鍵字

就會找到這麼一段代碼，我這個是壓縮過的min版本

 

 image: function() {
                            var t = this
                              , e = this.container.querySelector("input.ql-image[type=file]");
                            null == e && (e = document.createElement("input"),
                            e.setAttribute("type", "file"),
                            e.setAttribute("accept", "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"),
                            e.classList.add("ql-image"),
                            e.addEventListener("change", function() {
                                if (null != e.files && null != e.files[0]) {
                                    var n = new FileReader;
                                    n.onload = function(n) {
                                        var r = t.quill.getSelection(!0);
                                        t.quill.updateContents((new d.default).retain(r.index).delete(r.length).insert({
                                            image: n.target.result
                                        }), v.default.sources.USER),
                                        t.quill.setSelection(r.index + 1, v.default.sources.SILENT),
                                        e.value = ""
                                    }
                                    ,
                                    n.readAsDataURL(e.files[0])
                                }
                            }),
                            this.container.appendChild(e)),
                            e.click()
                        },

　　這段代碼主要說的是插入資格y一個input框，並設置一些屬性，並綁定一個change事件，並實例化一個FileReader對象，而後經過對象的onload事件的回調函數的第一個參數的target.result屬性就能拿到當前選中圖片的base64爲的值，這個值直接能夠賦值個img的src屬性，通常圖片預覽就是這麼實現的。

　　因此咱們只須要將這個n.target.result替換成咱們服務器端返回的圖片地址就能夠了。在這就會有人問，爲何不直接上傳base64數據，要換成圖片地址，那是由於普通的post攜帶數據大小是有限制的，小圖片是能夠這樣作，大圖片就不行了。

　　如今回到咱們本身的Myquill項目中，全局搜索new FileReader()，會在兩個文件中用到每個是dist文件，這個是打包過的，無論。還有一個是modules/uploader.js，因此咱們就在這改。

　　在這沒有用原生的ajax請求，用到的是axios。

　　1.安裝axios => npm i axios

　　2.更改core/module.js

import axios from 'axios';

class Module {
  constructor(quill, options = {}) {
    this.quill = quill;
    this.options = options;
    const config = {
      timeout: 60 * 1000, // Timeout
      headers: this.quill.options.headers || {},自定義請求頭
    };
    const _axios = axios.create(config);
    _axios.interceptors.response.use(
      response => {
        return response.data;
      },
      error => {
        // Do something with response error
        return Promise.reject(error);
      },
    );
    this.$http = _axios;
  }
}

Module.DEFAULTS = {};

export default Module;

　　3.更改modules/uploader.js下的Uploader.DEFAULTS 對象的handler方法中的const promises改成

    const promises = files.map(file => {
      return new Promise(async resolve => {
        let res1;
        if (this.quill.options.upload) {
          res1 = await this.$http.get(this.quill.options.upload);
        }
        if (res1 && res1.msg === 'quilljs') {
          const format = new FormData();
          format.append('img', file);
          const res = await this.$http.post(this.quill.options.upload, format);
          if (res.url) {
            resolve(res.url);
          } else {
            const reader = new FileReader();
            reader.onload = e => {
              resolve(e.target.result);
            };
            reader.readAsDataURL(file);
            console.log(
              '%c後端配置有誤！請在對應的地址上返回真確的數據',
              'color: red',
            );
          }
        } else {
          const reader = new FileReader();
          reader.onload = e => {
            resolve(e.target.result);
          };
          reader.readAsDataURL(file);
        }
      });
    });

我本身設置的規則是:get請求返回{msg: quilljs},post請求返回{url: '圖片的地址'}

　　4.將_develop/webpack.config.js的baseConfig.node設爲production ，默認爲development開發模式，這樣對大大減少打包的體積

　　5.運行npm run build:webpack獲得dist/quill.js

3.在GitHub如今vue-quill-editor的源碼https://github.com/cfj1996/vue-quill-img-editor

　　1.新建vue-quill-my-editor本地項目將vue-quill-editor的代碼解壓到本地項目中

　　2.package.json中的name改成本身想要的名字如：my-quill-editor,刪除private,license,注意main配置項，這個是在咱們import 引包是指項的文件，若是要改要與webpack配置的打包輸出文件路徑，文件名匹配。

　　3.新建plugins文件夾，將咱們上一個myQuill中的項目中打包的qiull.js複製過來，

　　4.更改src/editor.vue文件

　　　　將原先的import _Quill from 'quill'改成import _Quill from '../plugins/quill'

　　　　添加props下的upload: String,headers: {type: Object,default: () => ({})}

　　　　在initialize方法中改this._options = Object.assign({upload: this.upload, headers: this.headers}, this.defaultOptions, this.globalOptions, this.options)

　　5.更改src/index.js

　　　　將原先的import _Quill from 'quill'改成import _Quill from '../plugins/quill'

　　6.運行npm run build ,打包項目

　　7.運行npm link 將包my-quill-editor連接到全局方便本地測試

　　8.若是想上傳到npm上請自行百度。

4.本地測試項目包

　　1.用vue-cli3.0新建一個項目，

　　2.將babel.config.js改成

module.exports = {
  presets: [
      ['@vue/app',{modules: 'umd', useBuiltIns: 'entry'}]
  ]
}

 

　　3.運行npm link my-quill-editor 將剛剛連接的全局my-quill-editor包再連接帶項目依賴中。

　　4.運行npm i quill

　　4.設置代理vue.config.js

　　

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:7001/',// 個人後端接口爲127.0.0.1：7001
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                },
            }
        }
    }
}

 

　　5.在main.js中添加　　　

import Editor from 'my-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(Editor, {upload: '/api/quillImgUpload'})

因爲咱們在my-quill-editor項目中的src/index.js 中有Vue.component(quillEditor.name, quillEditor)

其中quillEditor.name就是quill-editor，因此咱們就能夠在其餘的組件中用quill-editor 組件了

　　6.用node 的egg.js或者其餘的後端語言新建一個後端接口

　　　　接口名爲quillImgUpload

　　　　get請求返回值{code: 200, msg: 'quilljs',}

　　　　post請求返回值：{code: 200,url: '圖片地址‘,}

5.注意事項

在本地測試的時候必定要在babel.config.js中添加{modules: 'umd', useBuiltIns: 'entry'}，因爲vue的項目中找不到exports，根據webpack打包的規則，引入的模塊就會掛載在的window上。