vue3中使用markdown编辑器

首先安装

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