vue32富文本编辑域的使用方法

Vue 3.2 中富文本编辑域的使用方法，可以使用第三方富文本编辑器，例如 Quill、TinyMCE、CKEditor 等，也可以使用 Vue 官方提供的组件 Vue Editor。

使用 Vue Editor 组件，需要先安装 @kangc/v-md-editor 和 @kangc/v-md-editor/lib/theme/style/vue-editor.css 两个依赖包：

npm install @kangc/v-md-editor @kangc/v-md-editor/lib/theme/style/vue-editor.css

安装完成后，在 Vue 组件中引入并注册 Vue Editor 组件：

<template>
  <div>
    <vue-editor v-model="content" :editorConfig="editorConfig"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from '@kangc/v-md-editor/lib/vue-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/theme/style/vue-editor.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      content: '',
      editorConfig: {
        theme: githubTheme
      }
    }
  }
}
</script>

在上述代码中，<vue-editor> 组件使用了 v-model 指令来绑定编辑器中的内容到 content 变量中，editorConfig 属性用来配置编辑器主题。

需要注意的是，Vue Editor 组件默认只支持 Markdown 语法，如果需要支持 HTML 语法，则需要额外安装 @kangc/v-md-editor/lib/preview 和 @kangc/v-md-editor/lib/preview/style/preview.css 两个依赖包：

npm install @kangc/v-md-editor/lib/preview @kangc/v-md-editor/lib/preview/style/preview.css

安装完成后，在 Vue 组件中引入并注册 Vue Editor 和 Preview 组件：

<template>
  <div>
    <vue-editor v-model="content" :editorConfig="editorConfig"></vue-editor>
    <vue-preview :source="content"></vue-preview>
  </div>
</template>

<script>
import { VueEditor, VuePreview } from '@kangc/v-md-editor/lib'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/theme/style/github.css'
import '@kangc/v-md-editor/lib/preview/style/preview.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn'
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn'
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index'
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index'

export default {
  components: {
    VueEditor,
    VuePreview
  },
  data() {
    return {
      content: '',
      editorConfig: {
        theme: githubTheme,
        plugins: [
          createKatexPlugin(),
          createMermaidPlugin(),
          createTodoListPlugin(),
          createLineNumbertPlugin(),
          createHighlightLinesPlugin()
        ]
      }
    }
  }
}
</script>

在上述代码中，<vue-preview> 组件使用 :source 属性来绑定编辑器中的内容，同时需要在 editorConfig 中添加插件来支持公式、流程图、任务列表、代码行号、高亮行等功能。

以上就是 Vue 3.2 中富文本编辑器的使用方法，可以根据自己的需求选择不同的富文本编辑器组件和配置。