首先安装
npm i md-editor-v3
Setup 模板
<template><MdEditor v-model="text" />
</template><script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const text = ref('Hello Editor!');
</script>
仅预览
<template><MdPreview :editorId="id" :modelValue="text" /><MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template><script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>
更多详情信息,访问官方文档:https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%A4%96%20NPM%20%E5%AE%89%E8%A3%85https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%A4%96%20NPM%20%E5%AE%89%E8%A3%85