综合 这是一款支持Vue3和React的开源Markdown富文本编辑器,提供实时预览、丰富的编辑功能和高度自定义选项

2024-11-19 06:43:02 +0800 CST views 1411

超级实用的富文本编辑器组件!同时支持Vue3、React

Markdown富文本编辑器对于开发者的重要性毋庸置疑。无论是文档管理、博客,还是文章编辑,都会使用到它。今天我想给大家介绍一款超级好用的开源Markdown编辑器,让你能够轻松将富文本编辑功能集成到自己的应用程序中。

编辑器简介

这款编辑器有两个版本:

  • md-editor-v3:适用于Vue3项目。
  • md-editor-rt:适用于React项目。

这两个版本是同系列项目,均使用JSX和TypeScript语法开发,支持在TSX项目中使用。

主要特点

  • 实时预览?:编辑器提供了实时预览功能,用户在编写时可以即时看到渲染后的效果,提升编辑体验。
  • 丰富的编辑功能?:支持基本的Markdown语法和扩展功能,如标题、列表、代码块、链接、图片、表格、任务列表和数学公式等。
  • 高度自定义⛱️:用户可以通过配置选项自定义编辑器的外观和行为。内置的白色和暗黑主题,多种样式预览,多种代码主题等。
  • 快捷键插入内容?:支持快捷键插入内容;支持使用Prettier格式化内容。
  • 现代界面设计?:采用现代的界面设计,注重用户体验和操作便捷性,界面清爽且易于使用。

预览图

images

安装和使用

以下是如何在Vue3项目中使用该编辑器的示例:

安装

yarn add md-editor-v3

使用已存在的语言、主题扩展(例如:日语)

yarn add @vavt/cm-extension

使用更多的扩展工具栏组件(例如:导出内容为PDF)

yarn add @vavt/v3-extension

在组件中使用

编辑器模式

<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';
import 'md-editor-v3/lib/preview.css';

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

相关链接

推荐文章

Rust开发笔记 | Rust的交互式Shell
2024-11-18 19:55:44 +0800 CST
JavaScript设计模式:桥接模式
2024-11-18 19:03:40 +0800 CST
Vue3的虚拟DOM是如何提高性能的?
2024-11-18 22:12:20 +0800 CST
在Rust项目中使用SQLite数据库
2024-11-19 08:48:00 +0800 CST
对多个数组或多维数组进行排序
2024-11-17 05:10:28 +0800 CST
一键压缩图片代码
2024-11-19 00:41:25 +0800 CST
什么是Vue实例(Vue Instance)?
2024-11-19 06:04:20 +0800 CST
php微信文章推广管理系统
2024-11-19 00:50:36 +0800 CST
防止 macOS 生成 .DS_Store 文件
2024-11-19 07:39:27 +0800 CST
CSS Grid 和 Flexbox 的主要区别
2024-11-18 23:09:50 +0800 CST
Vue3如何执行响应式数据绑定?
2024-11-18 12:31:22 +0800 CST
pycm:一个强大的混淆矩阵库
2024-11-18 16:17:54 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
js迭代器
2024-11-19 07:49:47 +0800 CST
gin整合go-assets进行打包模版文件
2024-11-18 09:48:51 +0800 CST
# 解决 MySQL 经常断开重连的问题
2024-11-19 04:50:20 +0800 CST
全栈利器 H3 框架来了!
2025-07-07 17:48:01 +0800 CST
10个几乎无人使用的罕见HTML标签
2024-11-18 21:44:46 +0800 CST
html夫妻约定
2024-11-19 01:24:21 +0800 CST
在 Nginx 中保存并记录 POST 数据
2024-11-19 06:54:06 +0800 CST
curl错误代码表
2024-11-17 09:34:46 +0800 CST
Manticore Search:高性能的搜索引擎
2024-11-19 03:43:32 +0800 CST
程序员茄子在线接单