md editor v3

？ MD编辑V3

英语| 中文

在jsx和typescript开发的VUE3的Markdown编辑器。

• 文档和示例：去

• React的同一系列编辑器：MD编辑器RT

配x功能

• 工具栏，屏幕fulll或screenfull在网页中等等。
• 主题，内置默认设置和黑暗主题。
• 编辑器的快捷键。
• 通过prettier美化您的内容（仅用于Markdown内容，而不是代码和其他文本）。
• 多语言，中文和英语（默认：中文）。
• 上传图片，粘贴或剪辑图片并上传。
• 直接渲染文章（没有编辑，没有事件侦听器，只能预览内容）。
• 预览， default ， vuepress ， github ， cyanosis ， mk-cute ， smart-blue样式（不相同）的主题。也可以自定义（请参阅示例页面）。
• mermaid （> = 1.8.0）， katex数学公式（> = 1.9.0）。
• 根据需要自定义工具栏。
• 按需导入（> = 4.0.0）。

？预览

默认主题	黑暗主题	仅预览

输入提示和标记，表情符号扩展

？安装

yarn add md-editor-v3

使用现有的语言和主题扩展，例如日语

yarn add @vavt/cm-extension

使用工具栏的现有组件，例如将内容导出为PDF

yarn add @vavt/v3-extension

有关使用或贡献的更多方法，请参阅：MD-编辑 - 扩展

用法

使用服务器端渲染时，请确保将editorId设置为恒定值。

从4.0.0开始，可以按需导入内部组件。

✍？显示编辑器

< 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 :id = " id " :modelValue = " text " />
  < MdCatalog :editorId = " id " :scrollElement = " scrollElement " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdPreview , MdCatalog } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/preview.css ' ;

const id = ' preview-only ' ;
const text = ref ( ' # Hello Editor ' );
const scrollElement = document . documentElement ;
</ script >

使用服务器端渲染时， scrollElement应为字符串类型，例如： html ， body ， #id ， .class 。

---

有关更多用法，请访问该文件。