一.基礎(chǔ)用法

1、NPM 導(dǎo)入 VUE-QUILL-EDITOR

npm install vue-quill-editor --save

2、引入 VUE-QUILL-EDITOR

在全局中引入

import Vue from 'vue'
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, /* { 默認全局 } */)

在指定的 vue 文件中引入

// 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

3、在 VUE 中使用

<template>
    <quill-editor 
        v-model="content" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
</template>
 
<script>
    export default {
        data() {
            return {
                content: `<p>這是 vue-quill-editor 的內(nèi)容！</p>`, //雙向數(shù)據(jù)綁定數(shù)據(jù)
                editorOption: {}, //編輯器配置項
            }
        },
        methods: {
            onEditorBlur() {}, // 失去焦點觸發(fā)事件
            onEditorFocus() {}, // 獲得焦點觸發(fā)事件
            onEditorChange() {}, // 內(nèi)容改變觸發(fā)事件
        }
    }
</script>

到這里一個默認的富文本編輯器已經(jīng)導(dǎo)入使用了，如下圖所視！

二.升級用法

一般的，我們在使用的時候并不需要這么多功能，可以適當?shù)膶庉嬈髋渲庙椷M行配置。

 editorOption: {
       modules:{
         toolbar: [
             ['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線，刪除線
             ['blockquote', 'code-block'], //引用，代碼塊
             [{'header': 1}, {'header': 2}], // 標題，鍵值對的形式；1、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]}], //幾級標題
             [{'color': []}, {'background': []}], // 字體顏色，字體背景顏色
             [{'font': []}], //字體
             [{'align': []}], //對齊方式
             ['clean'], //清除字體樣式
             ['image', 'video'] //上傳圖片、上傳視頻
            ]
         },
         placeholder: "輸入內(nèi)容..."
     }, //編輯器配置項

可以根據(jù)自己的實際需求，保留相應(yīng)的工具欄。

三.圖片上傳

vue-quill-editor 默認的是以 base64 保存圖片，會直接把圖片 base64 和內(nèi)容文本一起以字符串的形式提交到后端。這樣小圖片還行，如果要上傳大圖片會提示上傳失敗，優(yōu)秀的前端打字員顯然不會這樣做。

思路

• 可以先將圖片上傳至服務(wù)器，再將圖片鏈接插入到富文本中顯示
• 圖片上傳可以自定義一個組件或者使用 iview 的上傳圖片的組件（我在項目中使用的是自定義的組件，這里演示使用 iview 組件上傳）
• 上傳圖片的組件需要隱藏，點擊圖片上傳時調(diào)用 iview 的圖片上傳，上傳成功后返回圖片鏈接。

1. 在編輯器項中配置配置項

   editorOption: {
               modules: {
                   toolbar: {
                       container: toolbarOptions, // 工具欄
                       handlers: {
                           'image': function(value) {
                               if (value) {
                                   alert('點擊了上傳圖片')
                               } else {
                                   this.quill.format('image', false);
                               }
                           }
                       }
                   }
                   placeholder: "輸入內(nèi)容..."
               }, //編輯器配置項
           },

2. 調(diào)用 iview 的上傳組件。

   HTML:

   <Upload
       :show-upload-list="false"
       :on-success="handleSuccess"
       :format="['jpg','jpeg','png','gif']"
       :max-size="2048"
       multiple
       action="/file/upload"
       >
   </Upload>
   <quill-editor
       v-model="content"
       :options="editorOption"
       ref="quillEditor">
   </quill-editor>

   CSS:

   .ivu-upload {
       display: none;
   }

   JS:

   data () {
       return {
           content: '',
           editorOption: {                
               modules: {
                   toolbar: {
                       container: toolbarOptions,  // 工具欄
                       handlers: {
                           'image': function (value) {
                               if (value) {
                                   // 調(diào)用iview圖片上傳
                                   document.querySelector('.ivu-upload .ivu-btn').click()
                               } else {
                                   this.quill.format('image', false);
                               }
                           }
                       }
                   }
               }
           }
       }
   },
   methods: {
       handleSuccess (res) {
           // 獲取富文本組件實例
           let quill = this.$refs.myQuillEditor.quill
           // 如果上傳成功返回圖片URL
           if (res) {
               // 獲取光標所在位置
               let length = quill.getSelection().index;
               // 插入圖片，res為服務(wù)器返回的圖片鏈接地址
               quill.insertEmbed(length, 'image', res)
               // 調(diào)整光標到最后
               quill.setSelection(length + 1)
           } else {
               // 提示信息，需引入Message
               Message.error('圖片插入失敗')
           }
       },
   } 

   這樣就完成了圖片上傳的功能。

四.調(diào)整圖片大小

1.在原本的quill-editor能正常使用的情況下，安裝quill-image-drop-module和quill-image-resize-module

npm install quill-image-drop-module -S
npm install quill-image-resize-module -S

2.我是在全局注冊的quill-editor，在main.js中加入以下代碼

//富文本編輯器
import VueQuillEditor, { Quill } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import imageResize  from 'quill-image-resize-module' // 調(diào)整大小組件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖動加載圖片組件。
Quill.register('modules/imageResize', imageResize );
Quill.register('modules/imageDrop', ImageDrop);
Vue.use(VueQuillEditor);

3.在 editorOption 中添加配置? 在modules中與 history/toolbar平級

imageDrop: true, //圖片拖拽
imageResize: { //放大縮小
   displayStyles: {
      backgroundColor: "black",
      border: "none",
      color: "white"
   },
   modules: ["Resize", "DisplaySize", "Toolbar"]
},

4.在項目文件 vue.config.js 加上配置。（這一步很重要，如果不配置會報錯！）

const webpack = require('webpack'); //導(dǎo)入 webpack 模塊
 
//在模塊中加入
configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                'window.Quill': 'quill/dist/quill.js',
                'Quill': 'quill/dist/quill.js'
            })
       ],
   },

這樣就導(dǎo)入完成了，如下圖所示

文章來源地址http://www.zghlxwxcb.cn/news/detail-708125.html

到了這里，關(guān)于富文本編輯器 VUE-QUILL-EDITOR 使用教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！