vue2+vue-quill-editor富文本域

效果图

安装依赖

npm i vue-quill-editor

初始化

<template>
  <quill-editor v-model="content" :options="editorOptions"></quill-editor>
</template>

<script>
import {quillEditor} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
export default {
  name: 'App',
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOptions: {
        placeholder: '请输入正文'
      }
    }
  }
}
</script>

此时的效果：

自定义模式

想要自定义不显示指定功能，可以通过设置editorOptions.toolbar来实现：

editorOptions: {
  placeholder: '请输入正文',
  modules: {
    toolbar: {
      container: [
      ['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': [] }],                                 // 字体大小
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
      [{ 'color': [] }, { 'background': [] }],          // 颜色选择
      [{ 'font': [] }], // 字体
      [{ 'align': [] }],    // 居中
      ['clean'],            // 清除样式,
      ['link', 'image']
      ]
    }
  }
}

其中，空数组表示可选值为全部。

自定义字体大小

默认全部字体大小可选项只有 Small、Normal、Large、Huge，字体样式也只有三种

要想设置为指定大小和指定样式，需要重置字体配置

import { Quill, quillEditor } from 'vue-quill-editor'
...
const Size = Quill.import('attributors/style/size')
const sizes = ['12px', '14px', '16px', '18px']
Size.whitelist = sizes
Quill.register(Size, true)

const Font = Quill.import('formats/font')
const fonts = ['SimSun', 'Microsoft-YaHei']
Font.whitelist = fonts
Quill.register(Font, true)

editorOptions: {
	modules: {
		toolbar: {
			container: [
			  ...
			  [{size: sizes}],
	          [{font: fonts}]
			]
		}
	}
}

<style>
/* 设置字体样式 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before{
  content: '宋体' !important;
  font-family: 'SimSun';
}
.ql-font-SimSun{
  font-family: 'SimSun';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before{
  content: '微软雅黑' !important;
  font-family: 'Microsoft-YaHei';
}
.ql-font-Microsoft-YaHei{
  font-family: 'Microsoft-YaHei';
}
/* 设置字体大小 */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px' !important;
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px' !important;
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px' !important;
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px' !important;
  font-size: 18px;
}
</style>

效果如下：

图片放大缩小

vue-quill-editor 默认上传的图片是不支持图片放大缩小的，这明显不符合用户体验

npm i quill-image-resize-module

import ImageResize from 'quill-image-resize-module'

editorOptions: {
	placeholder: '请输入正文',
	 modules: {
	   imageResize: {
	     modules: ['Resize', 'DisplaySize', 'Toolbar']
	   },
	   toolbar: {...}
	 }
}

其中：

• Resize：图片可放大缩小
• DisplaySize：放大缩小时显示当前图片尺寸
• Toolbar：放大缩小时显示图片操作栏

如果你出现了下面的报错信息

记得去配置 vue.config.js 文件

// vue.config.js
module.exports = defineConfig({
  ...
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
  }
})

更多配置

更多配置详见于quill官网

项目依赖

"quill-image-resize-module": "^3.0.0",
"vue": "^2.6.14",
"vue-quill-editor": "^3.0.6",

项目代码

代码仓库