富文本编辑器vue

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

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  components: {
    QuillEditor
  },
  data() {
    return {
      content: '',
      editorOptions: {
        theme: 'snow',
        modules: {
          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': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean']
          ]
        }
      }
    }
  }
}
</script>

<style scoped>
/* 添加一些自定义样式 */
</style>

解释说明：

• QuillEditor 组件：我们使用了 @vueup/vue-quill 提供的 QuillEditor 组件来创建富文本编辑器。这个组件支持双向绑定，通过 v-model 指令可以轻松地将编辑器的内容与 Vue 的数据进行同步。
• editorOptions：这是 Quill 编辑器的配置选项，其中包含了主题（theme）和工具栏（toolbar）的设置。工具栏中定义了各种富文本编辑功能，如加粗、斜体、代码块等。
• 内容绑定：v-model="content" 将编辑器的内容绑定到 content 数据属性上，这样你可以在 Vue 实例中直接访问或修改编辑器的内容。

如果你需要更多的定制化功能，可以参考 Quill 官方文档 和 @vueup/vue-quill 文档。