vue-quill-editor 富文本使用

 1.下載安裝    官方文檔：https://www.kancloud.cn/liuwave/quill/1409423

npm install quill -S

npm install vue-quill-editor -S

2. 如果需要設置圖片大小還需安裝

npm install quill-image-resize-module --save

一、開始使用

1.全局掛載

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, /* { default global options } */)

2.組件中掛載 

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

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'

 //　設置圖片大小

 import ImageResize from 'quill-image-resize-module'
　Quill.register('modules/imageResize', ImageResize)

export default {
  components: {
    quillEditor，ImageResize
  }
}

二、在vue.config.js 添加代碼 ，不然引入import ImageResize from 'quill-image-resize-module'，會報錯 

const webpack = require("webpack")
// 放在 configureWebpack 中
plugins: [
           new webpack.ProvidePlugin({
              'window.Quill': 'quill/dist/quill.js',
               'Quill': 'quill/dist/quill.js',
            })
         ]

三、使用vue頁面中使用
   1.通過上傳圖片到服務器，服務器返回圖片的地址，然后放到富文本中 （不建議使用富文本自帶的功能- 圖片轉換成base64然后插入到富文本中）

<quill-editor
             ref="myQuillEditor"
             v-model="textContent"
             style="height: 500px;"
              @blur="onEditorBlur($event)"
             @focus="onEditorFocus($event)"
             @ready="onEditorReady($event)"
             :options="editorOption"
           />
         </el-card>
         <!-- 上傳圖片 -->
         <input
           v-show="false"
           id="fileInput"
           ref="clearFile"
           type="file"
           multiple="multiplt"
           class="add-file-right-input"
           @change="getFile($event)"
         >

2.富文本配置 

editorOption: {
            placeholder: '請輸入...',
            modules: {
               toolbar: {
                 container: [ // 工具欄配置, 默認是全部
                   ["bold", "italic", "underline", "strike"],
                   [{ color: [] }, { background: [] }],
                   [{ header: 1 }, { header: 2 }],
                   [{ script: "sub" }, { script: "super" }],
                    [{ indent: "-1" }, { indent: "+1" }],
                    [{ size: ["small", false, "large", "huge"] }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ font: [] }],
                    [{ 'align': [] }], 
                   [{
                     'list': 'ordered'
                   }, {
                     'list': 'bullet'
                   }],
                   ['blockquote'],
                   ['code-block'],
                   ['link'],
                   ['image'],
                 ],
                 // 插入圖片連接到富文本中
                 handlers: {
                   'image': function(value) {
                     if (value) {
                       // this.$refs.clearFile.value = null
                       console.log('value', value)
                       document.getElementById('fileInput').click()
                     } else {
                       this.quill.format('image', false)
                     }
                   }
                 }
               },
               // 調整圖片大小
                imageResize: {
                    displayStyles: {
                        backgroundColor: 'black',
                        border: 'none',
                        color: 'white'
                    },
                    modules: ['Resize', 'DisplaySize', 'Toolbar']
                }
            }
        }

3.上傳圖片

getFile(event) {
        const file = event.target.files
        console.log('file', file[0])
        const img = file[0]
        const imgName = file[0].name
        const size = file[0].size
        // 這里你是圖片上傳的代碼
           .....
       // 上傳完成后從接口返回值中獲取到 圖片地址
            const quill = this.$refs.myQuillEditor.quill
            const length = quill.getSelection().index
            // 插入圖片 response.data.url為服務器返回的圖片地址
            quill.insertEmbed(length, 'image', imgUrl)
            // 調整光標到最后
            quill.setSelection(length + 1) 
}

methods: {
      //失去焦點事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //獲得焦點事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准備富文本編輯器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    }

以上就可以基本使用富文本編輯器了

注意事項：

1.在富文本編輯器中樣式是對的，但在客戶端樣式沒生效

　　a.從管理端復制  quill.core.css

          

 

      b.在客戶端引用css

     c. 在用到富文本的地方 加上樣式 class='ql-editor'