vue富文本vue-quill-editor

這個富文本須要裝一下插件

    "quill": "^1.3.6"
    "quill-image-drop-module": "^1.0.3",   //壓縮圖片
    "quill-image-resize-module": "^3.0.0", //圖片大小控制
    "vue-quill-editor": "^3.0.6",

 使用

webpack中加一下配置

  plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ],

 main.js註冊組件

// 編輯器
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

 

頁面使用

<template>
        <quill-editor
          v-model="content"
          :content="content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>
</template>

<script>
import { Quill } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

export default {
  data () {
    return {
      name: 'register-modules-example',
      content: `1231`,
      editorOption: {
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
          ],
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        }
      }
    }
  },
  methods: {
    onEditorBlur (editor) {
      // console.log('editor blur!', editor)
      console.log(editor)
    },
    onEditorFocus (editor) {
      // console.log('editor focus!', editor)
    },
    onEditorReady (editor) {
      // console.log('editor ready!', editor)
    }
  }
}
</script>

 

自定義圖片上傳  參考處

          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  // 調用element UI圖片上傳
                  document.querySelector('#uploadImg .el-upload').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          },

 handers處重寫 圖片的點擊事件

觸發 element 的 upload的點擊事件

upload上傳成功的回調事件

    // 圖片上傳成功方法
    handleSuccess (response, file, fileList) {
      // 獲取富文本組件實例
      let quill = this.$refs.QuillEditor.quill
      // 若是上傳成功
      if (response) {
        // 獲取光標所在位置
        let length = quill.getSelection().index
        // 插入圖片，第三個參數爲服務器返回的圖片連接地址
        quill.insertEmbed(length, 'image', response.data.url)
        // 調整光標到最後
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        alert('圖片插入失敗')
      }
    }

 代碼

<template>
  <div class="quill-editor">
    <el-upload
      class="upload-demo"
      action="http://mock/2/api/richUpload"
      accept=".jpg,.jpeg,.png,.gif]"
      :headers="headers"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      id="uploadImg"
      ref="uploadImg"
      >
      上傳
    </el-upload>
    <quill-editor
      v-model="content"
      :content="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      ref="QuillEditor">
    </quill-editor>
  </div>
</template>

<script>
import { Quill } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  // [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],
  // [{ 'indent': '-1' }, { 'indent': '+1' }],
  // [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'font': [] }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'align': [] }],
  // ['clean'],
  ['link', 'image', 'video']
]
export default {
  data () {
    return {
      name: 'register-modules-example',
      content: `1231`,
      editorOption: {
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  // 調用iview圖片上傳
                  console.log(document.querySelector('#uploadImg .el-upload'))
                  document.querySelector('#uploadImg .el-upload').click()
                  console.log(value, 1231)
                } else {
                  console.log(212222222222222)
                  this.quill.format('image', false)
                }
              }
            }
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
          }
        }
      },
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token')
      }
    }
  },
  methods: {
    onEditorBlur (editor) {
      // console.log('editor blur!', editor)
      console.log(editor)
    },
    onEditorFocus (editor) {
      // console.log('editor focus!', editor)
    },
    onEditorReady (editor) {
      // console.log('editor ready!', editor)
    },
    // 上傳以前加認證信息
    beforeUpload () {
      this.headers.Authorization = 'Bearer ' + sessionStorage.getItem('token')
    },
    // 圖片上傳成功方法
    handleSuccess (response, file, fileList) {
      // 獲取富文本組件實例
      let quill = this.$refs.QuillEditor.quill
      // 若是上傳成功
      if (response) {
        // 獲取光標所在位置
        let length = quill.getSelection().index
        // 插入圖片，res爲服務器返回的圖片連接地址
        quill.insertEmbed(length, 'image', response.data.url)
        // 調整光標到最後
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        // Message.error('圖片插入失敗')
        alert('圖片插入失敗')
      }
    }
  }
}
</script>

 

tip: 在顯示的時候會出現樣式丟失的問題，須要加一個 class = "ql-editor"

<div class=" ql-editor" v-html="item.content"></div>