markdown-editor-vue3

📖介绍

一款基于 Vue3 开发的 markdown 编辑器，输入输出为Markdown格式。实时预览，富文本（HTML）方式编辑，过滤敏感标签。

🌈预览

🎨安装

npm install markdown-editor-vue3

✨使用

<template>
  <div class="container">
    <markdown-editor v-model="markdown" height="500px" placeholder="请输入" @save="onSave" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MarkdownEditor from 'markdown-editor-vue3'
import 'markdown-editor-vue3/dist/markdown-editor-vue3.css'

const markdown = ref('## Markdown Editor\n🌈示例内容')

const onSave = (markdown) => {
  console.log(markdown) // 输出Markdown内容
}
</script>

<style scoped>
.container {
  width: 1000px;
  margin: 100px auto;
  border: 1px solid #ccc;
}
</style>

💡参数说明

| 属性名 | 类型 | 默认值 | 说明 | | -------------------- | ------ | ------ | ------------ | | v-model / modelValue | string | - | Markdown内容 | | height | string | 200px | 编辑器高度 | | placeholder | string | 请输入 | 占位符 |

🔧方法

| 方法名 | 参数 | 说明 | | ------ | ------ | ----------------------- | | focus | - | 聚焦 | | insert | string | 插入内容 Markdown字符串 | | resize | - | 重新计算尺寸 |

⛳事件

| 事件名 | 参数 | 说明 | | ------ | ------ | ---------------- | | save | string | 输出Markdown内容 |

License

MIT