前言
最近在搞个开源项目，项目中想用markDown写一些博客之类的，于是我从网上找了一款支持ts的markDown插件，并将安装步骤记录在下
项目前准备
安装插件
yarn add @kangc/v-md-editor codemirror highlight.js @types/highlight.js -D
代码如下
shims-vue.d.ts 生明变量
declare module "@kangc/v-md-editor/lib/codemirror-editor";
declare module "@kangc/v-md-editor/lib/theme/github.js";
declare module "codemirror";
declare module "hljs";
main.ts 引入 VMdEditor
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
// import Highlight from '@/types/highlight'
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';
VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme, {
Hljs: hljs,
});
const app = createApp(App)
app.use(VMdEditor)
页面中使用 VMdEditor
<v-md-editor height="800px" :text="text"></v-md-editor>
