富文本编辑器的使用(vue2/3)

vue2中使用Vue-Quill-Editor

yarn add vue-quill-editor

// 导入并注册组件
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
  }
}

// 使用
<quillEditor :options="editorOption" class="quillEditor"></quillEditor>

// :options="editorOption"配置文件
editorOption: {
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
        [{ align: [] }], // 对齐方式-----[{ align: [] }]
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
        [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
        [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
        [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
        [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
        ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
        ['clean'], // 清除文本格式-----['clean']
        ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
      ]
    }
  }

vue3中使用@vueup/vue-quill

// 安装
// yarn add @vueup/vue-quill

// 导入
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// 配置文件
const editorOption = {
  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'], //清除字体样式
      ['image'], //上传图片、上传视频 ['image', 'video']
    ]
  },
  placeholder: '请输入内容...'
}

// 使用
<QuillEditor ref="myQuillEditor" theme="snow" :options="editorOption"
v-model:content="summary" contentType="html" enable style="min-height: 400px;" />

// 如果事件不生效参考这个帖子
// https://blog.csdn.net/weixin_43951592/article/details/128017960

插件官网 VueQuill | Rich Text Editor Component for Vue 3 (vueup.github.io)