基于Vue实现一个轻量级富文本编辑器 Vue-Quill-Editor 插件

Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。

该插件只兼容 IE10 以上，不能向下兼容，如果要向下兼容，只能放弃使用这个插件。

一、实现效果：

二、使用方法：

1. 下载 Vue-Quill-Editor

npm install vue-quill-editor --save

2. 下载 Quill（Vue-Quill-Editor 需要依赖）

npm install quill --save

也可以使用 CDN 的方式引入，具体使用见官网：Vue-Quill-Editor - npm

3. 挂载

我们在项目开发中，一般是将富文本编辑器直接封装成组件使用，所以我们一般在组件中直接挂载即可！

3.1 全局中挂载

// main.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

3.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'

export default {
  components: {
    quillEditor
  }
}

4. 组件开发

4.1 基本框架使用

<template>
    <div class="edit_container">
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" 
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            content: `富文本编辑器内容`,  // 富文本编辑器默认内容
            editorOption: {} // 富文本编辑器配置
        }
    },
    methods: {
    	// 准备编辑器
        onEditorReady(editor) {
			console.log('editor ready!', editor)
		}, 
		// 失去焦点事件
        onEditorBlur(editor){
        	console.log('editor blur!', editor)
        }, 
        // 获得焦点事件
        onEditorFocus(editor){
        	console.log('editor focus!', editor)
        }, 
        // 内容改变事件
        onEditorChange({ quill, html, text }){
        	console.log('editor change!', quill, html, text)
        	this.content = html
        }, 
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

4.2 扩展开发

1. 自定义toolbar工具栏

   // 工具栏配置
   const toolbarOptions = [
     ["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"], //上传图片、上传视频
   ];
   

2. 汉化工具栏
   主要通过修改 css 样式配置来实现工具栏的汉化处理。

   <style>
   .ql-snow .ql-tooltip[data-mode="link"]::before {
     content: "请输入链接地址:";
   }
   .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
     border-right: 0px;
     content: "保存";
     padding-right: 0px;
   }
   .ql-snow .ql-tooltip[data-mode="video"]::before {
     content: "请输入视频地址:";
   }
   .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: "文本";
   }
   .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: "标题1";
   }
   .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: "标题2";
   }
   .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: "标题3";
   }
   .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: "标题4";
   }
   .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: "标题5";
   }
   .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: "标题6";
   }
   .ql-snow .ql-picker.ql-font .ql-picker-label::before,
   .ql-snow .ql-picker.ql-font .ql-picker-item::before {
     content: "标准字体";
   }
   .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: "衬线字体";
   }
   .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: "等宽字体";
   }
   </style>
   

   注意：因为我们是在组件内写的样式，所以要删除 style 中的 lang=‘scss’ scoped 中的 scoped，使样式全局生效。

3. data 选项中的配置

   data() {
       return {
         content: ``, // 富文本编辑器默认内容
         // 富文本编辑器配置
         editorOption: {
           modules: {
             toolbar: toolbarOptions,  // 自定义工具栏，与上面定义的toolbarOptions 相对应
           },
           theme: "snow",  //主题
           placeholder: "请输入正文", 
         }, 
       };
     },
   

---

至此，通过以上配置，插件 Vue-Quill-Editor 就可以轻松使用了，但是在使用过程中肯定会有很多其他问题，在这里我并没有进行整理，如果有其他问题，欢迎小伙伴留言讨论。

完整版代码我已经上传 GitHub，需要的小伙伴自取。

---

参考文章：

1. 基于Vue项目的富文本vue-quill-editor的使用
2. Vue轻量级富文本编辑器-Vue-Quill-Editor

感谢原作者，如有侵权，请联系删除。