vue 富文本框 生成html

Vue富文本框，通常指的是像`vuedraggable`、`vue-quill-editor`这样的组件库，它们允许你在Vue应用中创建可编辑的富文本区域，用户可以输入HTML内容。例如，使用`vue-quill-editor`：

<template>
  <quill-editor v-model="content" :config="quillConfig"></quill-editor>
</template>

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

export default {
  components: { QuillEditor },
  data() {
    return {
      content: '', // 初始内容为空
      quillConfig: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ history: false }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ size: [] }],
            ['clean'] // 自动清理多余空格
          ]
        }
      }
    }
  }
}
</script>

在这个例子中，`v-model`绑定了组件的内容属性，而`quillConfig`则配置了富文本编辑器的功能。当用户在编辑器内输入HTML时，`content`的数据会实时更新。

当你需要从这个富文本框生成HTML字符串时，可以在JavaScript里获取`content`变量：

this.generatedHtml = this.content;

然后你可以将`generatedHtml`作为纯HTML显示或者发送到服务器。