vue-quill-editor + iview 實現富文本編輯器及圖片上傳

一、npm 安裝 vue-quill-editor 

npm install vue-quill-editor

二、再main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

三、建立子組件UE.vue

<template>
  <div>
    <Upload
      :show-upload-list="false"
      class="editor_upload"
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      multiple
      :before-upload="handleUpload"
      action="//jsonplaceholder.typicode.com/posts/"
    >
      <Button icon="ios-cloud-upload-outline" ></Button>
    </Upload>
    <quill-editor
      v-model="msg"
      :options="editorOption"
      ref="QuillEditor">
    </quill-editor>
  </div>
</template>
<script>
  import {PostBase64Upload} from '../../../services/pages/market'
  //工具
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike','blockquote', 'code-block',{'indent': '-1'}, {'indent': '+1'},{'color': []}, {'background': []},{'align': []},'image','clean'],        // toggled buttonssuperscript/subscript
  ];
  //工具名稱
  const titleConfig = {
    'ql-bold':'加粗',
    'ql-color':'顏色',
    'ql-font':'字體',
    'ql-code':'插入代碼',
    'ql-italic':'斜體',
    'ql-link':'添加連接',
    'ql-background':'背景顏色',
    'ql-size':'字體大小',
    'ql-strike':'刪除線',
    'ql-script':'上標/下標',
    'ql-underline':'下劃線',
    'ql-blockquote':'引用',
    'ql-header':'標題',
    'ql-indent':'縮進',
    'ql-align':'文本對齊',
    'ql-direction':'文本方向',
    'ql-code-block':'代碼塊',
    'ql-image':'圖片',
    'ql-video':'視頻',
    'ql-clean':'清除字體樣式',
  };
  export default {
    name: 'UE',
    data () {
      return {
        IMAGE_URL: global.IMG_URL,
        QuillEditor: null,
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具欄
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.ivu-upload .ivu-btn').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        file_url: '',
        importFile: '',
        msg: ''
      }
    },
    props: ["defaultMsg",],
    mounted() {
      this.msg = this.defaultMsg;
      this.addQuillTitle()
    },
    methods: {
      // 提交文件並阻斷自動上傳
      handleUpload(file) {
        let that = this;
        let time = setTimeout(function () {
          that.upload(file);
          clearTimeout(time);
        }, 0);
        return false
      },
      //上傳圖片
      upload(file) {
        let index = file.name.lastIndexOf("\.");
        let file_url = file.name.substring(index + 1, file.name.length);
        if (file_url == 'jpg' || file_url == 'jpeg' || file_url == 'png' ) {
          let that = this;
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            PostBase64Upload({
              base64_content: e.target.result,
              module_name: 'topic'
            })
              .then(data => {
                that.file_url = data.file_url;
                that.handleSuccess(that.file_url)
              })
              .catch(err => {
                that.$Message.error(err);
              });
            return false;
          };
        } else {
          this.$Message.error("請上傳'jpg','jpeg', png'格式的圖片");
          return false;
        }
      },

      //圖片加入到富文本框中
      handleSuccess (res) {
        let quill = this.$refs.QuillEditor.quill;
        let length = quill.getSelection().index;
        quill.insertEmbed(length, 'image', res)
        quill.setSelection(length + 1);
        this.msg = this.getImgSrc(this.msg);
      },
      //加入路徑的IP
      getImgSrc(content) {
        // 正則替換img的路徑
        let that = this;
        content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
          content = content.replace(new RegExp(capture, 'g'), that.IMAGE_URL + capture);//這裏也能夠替換成須要的路徑
        });
        content = content.replace(/<img/g, '<img style="width: 100%;"');
        return content;
      },

      //富文本工具添加名稱
      addQuillTitle () {
        const oToolBar = document.querySelector('.ql-toolbar'),
          aButton = oToolBar.querySelectorAll('button'),
          aSelect =  oToolBar.querySelectorAll('select');
        aButton.forEach(function(item){
          if(item.className === 'ql-script'){
            item.value === 'sub' ? item.title = '下標': item.title = '上標';
          }else if(item.className === 'ql-indent'){
            item.value === '+1' ? item.title ='向右縮進': item.title ='向左縮進';
          }else{
            item.title = titleConfig[item.classList[0]];
          }
        });
        aSelect.forEach(function(item){
          item.parentNode.title = titleConfig[item.classList[0]];
        });
      },
    },
  }
</script>
<style>
  .editor_upload {
    display: none;
  }
</style>

四、引入該組件頁面

 <UE :defaultMsg=defaultMsg ref="ue"></UE>

<script>
    import UE from "./UE"
    //因子組件不能修改父組件的參數，因此父組件提交時，直接調取子組件的參數
    this.$refs.ue.msg
</script>

上述的工具欄是根據我司的要求來選擇的，若是你想需求的更多，我也是查看別的大神的，你也能夠看看http://www.javashuo.com/article/p-vqiuxgbu-gq.html，