flomo-editor：基于 React + Slate.js 的开源富文本编辑器

本文介绍 flomo-editor，一个基于 React 和 Slate.js 开发的开源富文本编辑器，实现了类似 Flomo 的简洁笔记编辑体验。该项目展示了如何使用 Slate 框架构建功能完善的编辑器组件。

项目简介

flomo-editor 是一个轻量级的 React 富文本编辑器，由 Kffhi 开发并开源在 GitHub 上。该项目使用 Slate.js 作为核心编辑框架，实现了 Flomo 笔记应用的大部分编辑功能，适合作为学习 Slate.js 或构建类似编辑器的参考项目。

项目目前获得 1 个 star，主要使用 JavaScript (87.6%)、CSS (11.1%) 和 HTML (1.3%) 编写。

核心特性

flomo-editor 实现了以下编辑功能：

普通文本编辑 - 基础的文本输入和编辑
文本格式化 - 支持加粗、斜体样式
列表功能 - 无序列表和有序列表
图片插入 - 支持在编辑器中插入图片
工具条 - 提供格式化操作的工具栏
标签系统 - 支持 #标签语法
标签选择框 - 标签自动补全和选择
智能交互 - 自动处理 "#" 和空格键的交互
实时预览 - 右侧只读编辑器实时展示渲染效果

技术栈

React 17.0.2 - UI 框架
Slate 0.78.0 - 富文本编辑框架核心
slate-react 0.77.4 - Slate 的 React 绑定
Vite 2.8.0 - 构建工具
@vitejs/plugin-react - Vite React 插件

安装指南

前置要求

Node.js >= 14
npm 或 pnpm

安装步骤

bash

# 克隆仓库
git clone https://github.com/Kffhi/flomo-editor.git
cd flomo-editor

# 安装依赖
npm install

# 启动开发服务器
npm run dev

开发服务器将在端口 3002 启动。

可用脚本

命令	说明
`npm run dev`	启动开发服务器（端口 3002）
`npm run build`	构建生产版本
`npm run preview`	预览生产构建

项目结构

text

flomo-editor/
├── src/              # 源代码目录
├── index.html        # 入口 HTML
├── package.json      # 项目配置
├── vite.config.js    # Vite 配置
└── README.md         # 项目文档

使用场景

flomo-editor 适合以下用途：

学习 Slate.js - 了解如何使用 Slate 构建富文本编辑器
编辑器原型 - 作为构建类似 Flomo 笔记应用的起点
功能参考 - 参考标签系统、实时预览等功能的实现
UI 组件 - 提取编辑器组件用于其他项目

项目链接

GitHub 仓库: https://github.com/Kffhi/flomo-editor
项目预览: 运行 npm run dev 后访问 http://localhost:3002

总结

flomo-editor 是一个简洁实用的开源编辑器项目，完整实现了富文本编辑的核心功能。对于想要学习 Slate.js 或构建类似笔记应用的开发者来说，这是一个很好的参考项目。项目代码结构清晰，功能完整，值得学习和借鉴。