vue3 nuxtjs里如何使用

在 Vue3 和 Nuxt.js 中使用 MavonEditor 的步骤如下：

1. **安装依赖**：
首先，你需要在 Nuxt.js 项目中安装 MavonEditor。打开终端，进入项目目录并运行：

   npm install mavon-editor --save

或者使用 Yarn：

   yarn add mavon-editor

2. **导入并注册**：
在你的 Nuxt 插件文件（如 plugins/markdown.js）中，按照提供的代码示例导入并注册插件：

   import mavonEditor from 'mavon-editor';
   export default ({ app }) => {
     app.component('mavonEditor', mavonEditor);
   };

3. **在组件中使用**：
在你的 Vue 单元组件中，可以像这样导入并实例化 MavonEditor：

   <template>
     <div>
       <textarea ref="markdownArea" v-model="editorContent"></textarea>
       <div v-html="sanitizedContent"></div> <!-- 显示预览内容 -->
     </div>
   </template>

   <script>
   import { createEditor } from 'mavon-editor';

   export default {
     data() {
       return {
         editorContent: '',
         sanitizedContent: ''
       };
     },
     mounted() {
       this.createEditor();
     },
     methods: {
       createEditor() {
         const editor = createEditor(this.$refs.markdownArea);
         // 设置编辑器属性和配置，如必要
         editor.config({ initialValue: this.editorContent });
         
         // 监听内容变化
         editor.on('contentChange', content => {
           this.sanitizedContent = content; // 更新预览内容
         });
       }
     }
   };
   </script>

4. **全局使用**（可选）：
如果你想让 MavonEditor 在整个应用中可用，可以在布局文件（通常叫 layouts/default.vue）中引入它：

   <template>
     <nuxt/>
     <mavon-editor :config="{ ...defaultConfig }" @contentChange="handleContentChange" />
   </template>

然后在你的 App 组件或其他地方通过 `this.$refs.mavonEditor` 访问。