如何在 Vue3.js 应用程序中正确使用 mavon-editor 之类的 markdown 编辑器？答案

【问题标题】：How to correctly use mavon-editor like markdown editor in Vue3.js apps?如何在 Vue3.js 应用程序中正确使用 mavon-editor 之类的 markdown 编辑器？
【发布时间】：2022-12-14 17:57:25
【问题描述】：

我尝试安装 mavonEditor 作为我最新的 vue3.js 应用程序的降价编辑器，并且还使用 vite 来构建 vue.js 应用程序。首先，我按照mavonEditor的文档，没有定义mavon组件。

我使用 npm 安装了 mavon-editor(v2.10.4)。然后，像下面这样更改 main.js。

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";

createApp(App).use(mavon).mount("#app");

我尝试像那样将编辑器组件用于 App.vue。

<template>
  <div>
    <mavon-editor v-model="value" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";

export default {
  setup() {
    const value = ref("its my first mavon editor!");
    return { value };
  },
};
</script>

打开浏览器（Chrome），但没有显示任何项目。而不是编辑器，该错误发生在控制台中。

Uncaught ReferenceError: mavon is not defined

我真的很想知道如何在 Vue3.js 中正确使用 mavon-editor。有人帮我吗？

【问题讨论】：

标签： javascript vue.js wysiwyg

【解决方案1】：

你可以添加这个

app.use(mavonEditor)

并从中删除mavon

createApp(App).use(mavon).mount("#app");

希望这可以帮助您解决问题

【讨论】：