vue3+ts集成v-md-editor(markdown编辑器)

引言

本文记录vue3+ typescript集成markdown编辑器。主要采用是的是v-md-editor
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

安装

• 在项目终端输入安装命令

npm i @kangc/v-md-editor@next -S
npm i --save-dev @types/prismjs

• 在main.ts中进行全局配置

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

• 在vite-env.d.ts对js模块进行声明

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

• 构建一个测试页面，并且输入如下代码。

<template>
      <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script  setup lang="ts">
import { watch, ref, onMounted, toRef,reactive } from 'vue';

const text = ref("test")
</script>

<style lang="less" scoped>
</style>

• 最终显示页面