在 Vue3 中使用 markdown 组件

使用的是 v-md-editor 组件

安装

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用yarn
yarn add @kangc/v-md-editor@next
复制代码

引入组件

import { creatApp } from 'vue';
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';

VMdEditor.use(githubTheme);

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

app.use(VMdEditor);
复制代码

基础用法

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
import { ref } from 'vue';

export default {
	setup () {
		const text = ref('');

		return {
			text
		}
	}
}
</script>
复制代码

保存后的 markdown 文本如何渲染在页面上？

如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如：

<template>
  <v-md-editor :model-value="markdown" mode="preview"></v-md-editor>
</template>

<script>
import { ref } from 'vue';

export default {
	setup () {
		const markdown = ref('### 标题');

		return {
			markdown
		}
	}
}
</script>
复制代码

如果你的项目不需要编辑功能，只需要渲染 markdown 你可以只引入 preview 组件来渲染。例如：

// main.js
import { creatApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 引入你所使用的主题 此处以 github 主题为例
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme);

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

app.use(VMdPreview);
复制代码

<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
import { ref } from 'vue';

export default {
	setup () {
		const markdown = ref('### 标题');

		return {
			markdown
		}
	}
}
</script>
复制代码

更多高级用法参考官方文档：v-md-editor