Vue中使用富文本编辑框的实践与探索

npm install vue-quill-editor --save

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
// require styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '', // 富文本内容
      editorOption: {} // 富文本编辑器配置
    };
  }
};
</script>

editorOption: {
  placeholder: '请输入内容',
  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'], // 清除文本格式
      ['link', 'image', 'video'] // 链接、图片、视频
    ]
  }
}