v-md-editor使用

参考Vue3使用v-md-editor md展示修改markdown(md)文档_v-md-editor读取md文件-CSDN博客

1.导入   npm install @kangc/v-md-editor@next （npm管理）

2.在mian.js 中引入

// 富文本 v-md-editor 导入
import VMdEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import githubTheme from "@kangc/v-md-editor/lib/theme/github.js";
import "@kangc/v-md-editor/lib/theme/style/github.css";
// highlightjs
import hljs from "highlight.js";
VMdEditor.use(githubTheme, {
  Hljs: hljs,
});
createApp(App).use(router).use(Antd).use(VMdEditor).mount("#app");

3.编辑器的使用（TODO）

4.富文本格式（md格式）显示

//代码块引入
import VMdTextareaEditor from "@kangc/v-md-editor";
//当做组件直接使用
<VMdTextareaEditor v-model="item.content" :mode="`preview`" />

效果图：

可能碰到的报错：（vue3+typeScript）

参考：在 vue3 中使用报错？ | v-md-editor (gitee.io)

错误示例：Could not find a declaration file for module '@kangc/v-md-editor/lib/theme/vuepress.js'.

解决方法：

// src/shims.d.ts
declare module '@kangc/v-md-editor/lib/theme/vuepress.js';