Vue中EpicEditor和vue-quill-editor的使用详解

npm install vue-quill-editor --save

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    'quill-editor': quillEditor
  },
  data() {
    return {
      content: '', // 存储富文本内容
      toolbarOptions: [ // 工具栏选项
        ['bold', 'italic', 'underline'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        ['link', 'image', 'video'],
        [{ 'color': [] }, { 'background': [] }], // 可以自定义颜色和背景色
        [{ 'font': [] }], // 可以自定义字体
        ['clean'] // 清除格式
      ]
    }
  }
}

<template>
  <div>
    <quill-editor v-model="content" v-on:change="handleChange" :options="toolbarOptions"></quill-editor>
  </div>
</template>

methods: {
  handleChange(value) {
    console.log(value); // 输出变化后的富文本内容
  }
}

toolbarOptions: [ // 工具栏选项
  ['bold', 'italic', 'underline'],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  ['link', 'image', 'video'],
  [{ 'color': [] }, { 'background': [] }], // 可以自定义颜色和背景色
  [{ 'font': [] }], // 可以自定义字体
  ['clean'], // 清除格式，
  ['customButton'] // 自定义按钮，需要实现对应的方法来处理点击事件和插入文本的操作。具体实现方式可以参考官方文档。
]

npm install epic-editor --save

import { Editor } from 'epic-editor'

export default {
  components: {
    'epic-editor': Editor
  },
  data() {
    return {
      content: '', // 存储富文本内容
      config: { // EpicEditor的配置选项
        theme: {
          primary: '#007bff', // 主题颜色
          secondary: '#6c757d', // 次级颜色
          tertiary: '#343a40', // 三级颜色
          info: '#17a2b8', // 信息颜色
          success: '#28a745', // 成功颜色
          warning: '#ffc107', // 警告颜色
          danger: '#dc3545', // 危险颜色
          dark: '#343a40', // 暗色主题
          light: '#f8f9fa', // 亮色主题
        },
        editor: { // Quill编辑器的配置选项
          modules: {
            toolbar: [ // 工具栏选项
              ['bold', 'italic', 'underline'],
              [{ 'color': [] }, { 'background': [] }], // 可以自定义颜色和背景色
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'script': 'sub'}, { 'script': 'super' }],
              [{ 'indent': '-1'}, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              ['link', 'image', 'video'],
              [{ 'header': 1 }, { 'header': 2 }], // 可以自定义标题级别
              ['clean'] // 清除格式，
            ]
          }
        }
      }
    }
  }
}

<template>
  <div>
    <epic-editor v-model="content" v-on:change="handleChange"></epic-editor>
  </div>
</template>

methods: {
  handleChange(value) {
    console.log(value); // 输出变化后的富文本内容
  }
}

toolbar:  [
            ['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': ['45px','60px','90px'] }],  // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
            [{ 'color': [] }, { 'background': [] }],          // 颜色选择
            [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],// 字体
            [{ 'align': [] }], // 居中
            ['clean']                                         // 清除样式
          ]
        }
        // 背景颜色 - background
        // 加粗- bold
        // 颜色 - color
        // 字体 - font
        // 内联代码 - code
        // 斜体 - italic
        // 链接 - link
        // 大小 - size
        // 删除线 - strike
        // 上标/下标 - script
        // 下划线 - underline
        // 引用- blockquote
        // 标题 - header
        // 缩进 - indent
        // 列表 - list
        // 文本对齐 - align
        // 文本方向 - direction
        // 代码块 - code-block
        // 公式 - formula
        // 图片 - image
        // 视频 - video
        // 清除字体样式- clean