vue2+vue-quill-editor富文本的使用心得

当需求不是很复杂的时候，个人认为vue-quill-editor这个富文本插件是我用的最舒服的，以下是我的使用心得和使用方式，效果如下

 使用步骤

1.下载依赖
 

npm install vue-quill-editor -S

2.在用到的页面如下引入

import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 如果使用图片可调整大小，加入如下配置
import * as Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

         在这儿要注意如果不需要可调整图片大小的功能，就忽略掉可上传文件的配置，如果需要可调整图片大小，则按下方操作

 首先安装webpack

npm install webpack-dev-server --save-dev

然后在vue.config.js文件中配置

 
const webpack = require('webpack')





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

 

 

3.引入使用如下

  <quillEditor
           ref="myQuillEditor"
           v-model="dataForm.centralText"
           :options="editorOption"
></quillEditor>

4.在data中配置

export default {
    data(){
        return{
            editorOption: {
            // 占位配置
            placeholder: "",
            modules: {
            // 配置工具栏
            toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            ["image"],
           ],
           // 如果使用图片可调整大小，加入如下配置
           imageResize: {
           displayStyles: {
             backgroundColor: 'black',
             border: 'none',
             color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
     }
        },
      },

  }
 }
}

5.如果需要鼠标漂浮现在富文本各个按钮的功能名，则建一个js文件 在js文件中定义如下

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-list':'列表',
    'ql-align':'文本对齐',
    'ql-direction':'文本方向',
    'ql-code-block':'代码块',
    'ql-formula':'公式',
    'ql-image':'图片',
    'ql-video':'视频',
    'ql-clean':'清除字体样式'
   };
   export function addQuillTitle(){
    const oToolBar = document.querySelector('.ql-toolbar'),
       aButton = oToolBar.querySelectorAll('button'),
       aSelect = oToolBar.querySelectorAll('select'),
       aSpan= oToolBar.querySelectorAll('span');
    aButton.forEach((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 if(item.className === 'ql-list'){
      item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
     }else if(item.className === 'ql-header'){
      item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
     }else{
      item.title = titleConfig[item.classList[0]];
     }
    });
    aSelect.forEach((item)=>{
     if(item.className!='ql-color'&&item.className!='ql-background'){
      item.parentNode.title = titleConfig[item.classList[0]];
     }
    });
    aSpan.forEach((item)=>{
     if(item.classList[0]==='ql-color'){
      item.title = titleConfig[item.classList[0]];
     }else if(item.classList[0]==='ql-background'){
      item.title = titleConfig[item.classList[0]];
     }
    });
   }

建完以后在引用富文本的页面引入此文件
 

import { addQuillTitle } from '../quill-title.js'

在挂载时运用

mounted(){
    addQuillTitle();
  },

如此便可以了，简单粗暴