Vue 3.2 富文本编辑器使用教程：Vue Editor 和 第三方编辑器

Vue 3.2 富文本编辑器使用指南

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

使用 Vue Editor 组件

1. 安装依赖包

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

2. 引入并注册组件

   <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 属性用于配置编辑器主题。

3. 支持 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
     

   • 引入并注册 VueEditor 和 VuePreview 组件：

     <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 中添加插件以支持公式、流程图、任务列表、代码行号、高亮行等功能。

第三方富文本编辑器

• Quill：轻量级、灵活，可定制化程度高。
• TinyMCE：功能强大，提供丰富的功能和插件，适合复杂场景。
• CKEditor：成熟的富文本编辑器，拥有庞大的用户群体和丰富的文档。

这些第三方编辑器通常需要安装相应的包和配置，详细使用方法请参考其官方文档。

总结

本文介绍了 Vue 3.2 中使用富文本编辑器的方法，并提供了 Vue Editor 和第三方编辑器的示例代码。根据您的具体需求选择合适的富文本编辑器组件，并进行相应的配置。