vue2 封装富文本编辑器 支持获取富文本编辑器的内容

在Vue2中封装富文本编辑器通常是为了提供一个易于使用的组件，允许用户输入、编辑和格式化文本内容。比如，你可以使用像TinyMCE、Quill或者CKEditor这样的第三方库。以下是封装这类编辑器并获取其内容的基本步骤：

1. 引入依赖：首先在项目中安装所需的富文本编辑器库，例如`npm install vue-quill-editor` 或 `yarn add vue-quill-editor`。

2. 创建组件：创建一个名为`VueEditor.vue`的新文件，并导入编辑器插件，然后编写组件模板：

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

<script>
import QuillEditor from 'vue-quill-editor'

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      content: '',
      editorOptions: {
        modules: { toolbar: [] }, // 根据需要配置工具栏选项
      },
    }
  },
  methods: {
    getContent() {
      this.content = this.$refs.editor.root.innerHTML; // 获取富文本内容
    },
  },
}
</script>

3. 使用组件：在父组件中引入并使用这个编辑器组件，同时可以在需要的时候调用`getContent`方法获取内容：

<template>
  <div>
    <button @click="getContent">获取内容</button>
    <vue-editor></vue-editor>
  </div>
</template>

<script>
import VueEditor from './components/VueEditor.vue'

export default {
  components: {
    VueEditor,
  },
  methods: {
    // 添加到方法列表中
    getContent() {
      console.log(this.$children[0].getContent()); // 调用子组件的方法获取内容
    },
  },
}
</script>