快捷導(dǎo)航

Vue富文本插件(quill-editor)的使用及說明

更新時間：2023年02月18日 16:11:47 作者：前端阿皓

這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說明，具有很好的參考價值，希望對大家有所幫助。

1、下載依賴

cnpm i vue-quill-editor --save
cnpm i quill-image-resize-module --save        //圖片操作

2、全局引入及注冊main.js

import VueQuillEditor from 'vue-quill-editor';
import * as Quill from 'quill'; //引入編輯器
import resizeImage from 'quill-image-resize-module'; // 圖片縮放組件。
Quill.register('modules/resizeImage ', resizeImage);
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);

3、封裝組件RichText

<template>
  <div class="richBox" v-loading="spinning">
    <quill-editor
        v-model="content"
        :options="editorOption"
        ref="QuillEditor">
    </quill-editor>
     <input type="file"
      ref="imgs"
      accept="image/*" class="uploads" style="display: none;" @change="uploadImgs">
      <input type="file"
       ref="videos"
       accept="video/*" class="upVideo" style="display: none;" @change="uploadVideo">
  </div>
</template>

<script>
 import {
   uploads
 } from "./upload.js"          //uploads.js是封裝的一個上傳方法，可基于Promise進行封裝
 const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{'header': 1}, {'header': 2}],               // custom button values
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
        [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
        [{'direction': 'rtl'}],                         // text direction

        [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
        [{'header': [1, 2, 3, 4, 5, 6, false]}],

        [{'color': []}, {'background': []}],          // dropdown with defaults from theme
        [{'font': []}],
        [{'align': []}],
        ['link', 'image', 'video'],
        ['clean']                                         // remove formatting button
      ]
  export default{
    props: {
       values: {                          //用于回顯
         type: String,
         default: ''
       },
    },
    data(){
      return{
        spinning:false,
        content: '',
        editorOption: {
          placeholder:"請輸入",
          modules: {
            imageResize: {                       //圖片放大縮小配置 
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: ['Resize', 'DisplaySize', 'Toolbar']
            },
            toolbar: {
              container: toolbarOptions,  // 工具欄
              handlers: {
                'image': function (value) {
                    if (value) {
                      document.querySelector('.uploads').click()
                    } else {
                        this.quill.format('image', false);
                    }
                },
                'video':function(value){
                  if (value) {
                    document.querySelector('.upVideo').click()
                  } else {
                     this.quill.format('video', false);
                  }
                }
              }
            }
          }
        }
      }
    },
    watch: {                        //監(jiān)聽回顯的數(shù)據(jù)變化
        values: {
    　　   handler(newVal, oldVal) {
      　　    this.content = newVal;
              this.$refs.QuillEditor.quill.blur();
    　　   },
    　　    immediate: true
        }
     },
    methods:{
      getVal () {                     //返回內(nèi)容
        return this.content
      },
      setVal(data){             //賦值
        this.content = data;
      },
      uploadImgs(e){            //上傳圖片
        var file = this.$refs.imgs.files[0];
        this.spinning = true
        this.upFile(file,'image');
        e.target.value = '';
      },
      uploadVideo(e){              //上傳視頻
        var file = this.$refs.videos.files[0];
        this.spinning = true
        this.upFile(file,'video')
      },
      upFile(file,type){               //上傳api
        uploads(file).then(result => {
          this.spinning = false
          this.insertImg(result,type)
        })
      },
      insertImg(url,type){         //插入圖片
        var quill = this.$refs.QuillEditor.quill;
        let length = quill.getSelection().index;
        quill.insertEmbed(length,type,url);
        quill.setSelection(length+1);
      }
    }
  }
</script>
<style>
  p {
    margin: 10px;
  }
  .edit_container,
  .quill-editor {
    height: 300px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "標(biāo)題1" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "標(biāo)題2" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "標(biāo)題3" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "標(biāo)題4" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "標(biāo)題5" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "標(biāo)題6" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "標(biāo)準(zhǔn)字體" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "襯線字體" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等寬字體" !important;
  }
</style>
<style scoped="scoped" lang="scss">
.richBox{
  width: 95% !important;
  .quill-editor{
    width: 100% !important;
    height: 600px;
  }
}
::v-deep .ql-container{
  height: 90% !important;
}

</style>

4、使用

 <richTxt ref="child" :values="form.content"/>

1、獲取富文本內(nèi)容：

let oldProcedure = this.$refs.child.getVal();
this.form.content= oldProcedure;

5、萬事俱備之后

運行項目可能會出現(xiàn)imports錯誤，這里提供了cli2和cli3兩種解決方案

1. 在vue cli2中，處理方案如下:

找到webpack.base.conf文件，添加以下代碼

const webpack = require('webpack');
module.exports = {
	plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ],
}

2.在vue cli3中，處理方案如下：

在項目根目錄找到vue.config.js文件，如果沒有就創(chuàng)建此文件，添加以下代碼

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
  	//富文本圖片縮放
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      'window.Quill': 'quill',
      'Quill': 'quill/dist/quill.js'
    }])
  }
}
//注意  如果原文件有chainWebpack 不要重復(fù)添加，在原有chainWebpack里面的最后面添加上面代碼