在vue3中的markdown编辑器md-editor-v3,支持tsx,暗黑模式

发布网友发布时间：2024-09-17 00:46

共1个回答

热心网友时间：2024-10-17 23:56

在开发 vue3-admin 的 demo 内容过程中，发现合适的编辑器组件难以寻得。为了满足项目需求，自主开发了 md-editor-v3，主要支持 vue3 项目与 jsx 语法，且兼容 tsx 项目。该组件不依赖 less.modifyVars 方法进行主题切换，而是通过替换 class 名称实现暗黑模式的快速切换。项目源码位于 md-editor-v3 仓库。

当前功能包括：默认模式与暗黑模式展示。后续将不断更新更多功能，如用户需求的特定功能，请在下方留言。

预览图展示了编辑器在两种不同模式下的效果。

在 jsx 开发环境下，使用 modelValue 与 onChange 方法实现数据绑定，而在 vue 模板语法下，通过 v-model 指令即可轻松完成数据双向绑定。

编辑器提供了丰富的工具栏选项，供用户自定义功能。若某些字段未被主动提供，可能导致页面布局问题。

通过快捷键实现操作，主要为 CTRL + 功能英文首字母，如需避免冲突，可加入 SHIFT 或 ALT。

支持在项目中上传多张图片，包括通过粘贴板上传图片的功能。但需注意，使用粘贴板上传网页上的 gif 图片时，可能会导致格式不正确的问题。

如有任何可用功能或发现编辑器存在的 Bug，欢迎通过下方方式反馈，让我们共同优化与进步。