vue富文本编辑器

<template>
  <div>
    <!-- 富文本编辑器组件 -->
    <quill-editor v-model="content" />
  </div>
</template>

<script>
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
  },
  data() {
    return {
      content: '<p>初始内容</p>'
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 quill-editor 组件，它是一个基于 Quill.js 的富文本编辑器。
   • v-model 绑定了一个名为 content 的数据属性，用于双向绑定富文本编辑器的内容。

2. 脚本部分 (<script>):

   • 引入了 Quill.js 的核心样式和主题样式（snow 和 bubble）。
   • 引入了 vue-quill-editor 组件库，并注册了 quillEditor 组件。
   • 在 data 中定义了一个 content 属性，作为富文本编辑器的初始内容。

3. 样式部分 (<style scoped>):

   • 可以根据需要自定义样式，这里使用了 scoped 属性来确保样式只作用于当前组件。

这个示例展示了如何在 Vue 项目中集成一个富文本编辑器。