龙空技术网

[开源]支持 Markdown 语法、基础功能完善的 React 富文本编辑器

一飞开源 164

前言:

而今我们对“富文本编辑器使用场景”大概比较重视,大家都想要了解一些“富文本编辑器使用场景”的相关内容。那么小编在网络上网罗了一些有关“富文本编辑器使用场景””的相关知识,希望我们能喜欢,小伙伴们一起来学习一下吧!

一飞开源,介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区,共建开源新生态!

一、开源项目简介Tide

开箱即用、扩展性强、支持 Markdown 语法、基础功能完善的 React 富文本编辑器。

二、开源协议

使用MIT开源协议。

三、界面展示四、功能概述特性基于 JSON 格式存储支持 Markdown 快捷语法标题引用代码块表格超链接图片分割线粗体、斜体、删除线无序列表、有序列表、任务列表支持粘贴 Markdown 文本支持功能增强的 Table 表格支持粘贴、拖拽图片支持 Emoji 表情选择内建菜单栏支持多主题五、技术选型目录

.├── apps│   ├── demo                      # 演示项目,部署在 Pages 上,地址:│   └── legacy                    # 真实项目,Gitee 社区版正在使用,包名为 @gitee/tide-legacy├── presets                       # 提供 @、#、! 引用(mention)功能的预知 UI 和配置,│                                 # 主要 @gitee/tide-legacy 在使用├── docs                          # 文档(待完善),包括:如何贡献├── packages                      # 组织 monorepo 的包目录│   ├── editor                    # 开箱即用的编辑器基础包,包名为 @gitee/tide│   ├── starter-kit               # 将常用的扩展包集成在一起,配合 @gitee/tide 包使用,提供开箱即用体验│   ├── common                    # 常用的工具类等│   ├── react                     # 提供编辑器的 React 封装,便于在 React 项目中使用│   ├── extension-*               # extension- 开头的包,提供编辑器的扩展功能│   ├── tsconfig                  # 统一的 tsconfig 配置│   └── eslint-config-custom      # 统一的 eslint 配置└── scripts                       # 提供简化开发流程的脚本等
构建和运行

Tide 使用 turborepo 来管理多个 npm 包的编译和分发,使用 pnpm 来管理本地依赖。

访问一飞开源: 下载cd tide# 安装依赖pnpm i# 构建 packagespnpm build# 运行 demo 方便开发,会自动打开浏览器pnpm dev:demo --open

由于 monorepo 依赖关系复杂,暂不支持本地构建后通过 npm link、yarn link 和 pnpm link --global 方式使用本地构建的版本。

感谢TiptapProseMirror六、源码地址

访问一飞开源:

标签: #富文本编辑器使用场景