Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geallenboy/draw-text
DrawText 是一个开源的文本与绘图创作工具，结合了 EditorJS 的强大文本编辑能力和 Excalidraw 的直观绘图功能，为用户提供了一个无缝整合的创作平台。无论是撰写文章、设计草图，还是创建图文并茂的演示文档，DrawText 都能满足你的需求。
https://github.com/geallenboy/draw-text
editorjs excalidraw nextjs react type vercel
Last synced: 5 days ago
JSON representation
DrawText 是一个开源的文本与绘图创作工具，结合了 EditorJS 的强大文本编辑能力和 Excalidraw 的直观绘图功能，为用户提供了一个无缝整合的创作平台。无论是撰写文章、设计草图，还是创建图文并茂的演示文档，DrawText 都能满足你的需求。
- Host: GitHub
- URL: https://github.com/geallenboy/draw-text
- Owner: geallenboy
- Created: 2025-01-13T05:47:05.000Z (14 days ago)
- Default Branch: master
- Last Pushed: 2025-01-21T06:07:57.000Z (6 days ago)
- Last Synced: 2025-01-21T07:19:25.430Z (6 days ago)
- Topics: editorjs, excalidraw, nextjs, react, type, vercel
- Language: TypeScript
- Homepage: https://drawtext.nextjsbase.site/
- Size: 19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DrawText - 开源文本与绘图创作工具
**DrawText** 是一个开源的文本与绘图创作工具，结合了 **EditorJS** 的强大文本编辑能力和 **Excalidraw** 的直观绘图功能，为用户提供了一个无缝整合的创作平台。无论是撰写文章、设计草图，还是创建图文并茂的演示文档，DrawText 都能满足你的需求。
---
## 目录
1. [简介](#简介)
2. [功能特色](#功能特色)
3. [快速开始](#快速开始)
- [安装](#安装)
- [使用](#使用)
4. [技术栈](#技术栈)
5. [贡献指南](#贡献指南)
6. [路线图](#路线图)
7. [许可证](#许可证)
8. [支持与反馈](#支持与反馈)
---
## 简介
DrawText 是一个开源的创作工具，旨在为用户提供一个简单、高效且功能强大的平台，打破文本与图形之间的界限，让创意表达更加自由和直观。无论是个人用户还是团队协作，DrawText 都将成为你不可或缺的创作伙伴。
### 核心功能
- **富文本编辑**：基于 EditorJS，支持模块化内容块。
- **手绘风格绘图**：集成 Excalidraw，支持直观的绘图功能。
- **无缝整合**：文本与绘图完美结合，支持拖拽布局调整。
- **实时协作**：多人同时编辑，实时同步更改。
- **导出与分享**：支持多种格式导出，方便分享与协作。
- **可定制与可扩展**：提供插件和 API，满足个性化需求。
---
## 功能特色
### 1. 富文本编辑
使用 EditorJS 的模块化块系统，轻松创建和编辑内容。支持段落、标题、列表、图片、引用等，并提供干净的 JSON 输出，便于集成。
### 2. 手绘风格绘图
使用 Excalidraw 的直观手绘风格图表，将您的想法变为现实。非常适合线框图、流程图和头脑风暴。
### 3. 无缝整合
轻松结合文本和绘图。将草图拖放到文本编辑器中，并调整布局以获得精美的专业外观。
### 4. 实时协作
与团队实时协作。编辑文档、绘制草图并留下评论——所有更改都会即时同步。
### 5. 导出与分享
将您的创作导出为 PDF、Markdown 或 JSON。生成可分享的链接，与他人协作或展示您的作品。
### 6. 可定制与可扩展
通过自定义插件、主题和工具，根据您的需求定制 DrawText。开发者友好的 API 使集成和扩展变得轻而易举。
---
## 快速开始
### 安装
1. 克隆仓库：
```bash
git clone https://github.com/geallenboy/drawText.git
```
2. 安装依赖：
```bash
cd drawText
npm install
```
3. 启动开发服务器：
```bash
npm run dev
```
### 使用
1. 打开浏览器，访问 `http://localhost:3000`。
2. 开始创作：在文本编辑器中输入内容，或使用绘图工具绘制草图。
3. 导出作品：点击“导出”按钮，选择格式并下载文件。
---
## 技术栈
- **前端**：React+Nextjs + TypeScript
- **文本编辑器**：EditorJS
- **绘图工具**：Excalidraw
- **实时协作**：WebSocket 或 Firebase
- **后端**：supabase
- **数据库**：PostgreSQL
---
## 贡献指南
我们欢迎任何形式的贡献！以下是参与贡献的步骤：
1. **Fork 仓库**：点击右上角的 "Fork" 按钮，将仓库复制到你的 GitHub 账户。
2. **克隆仓库**：
```bash
git clone https://github.com/你的用户名/drawText.git
```
3. **创建分支**：
```bash
git checkout -b feature/你的功能
```
4. **提交更改**：
```bash
git add .
git commit -m "描述你的更改"
git push origin feature/你的功能
```
5. **提交 Pull Request**：在 GitHub 上提交 PR，并描述你的更改。
### 贡献规范
- 代码风格：遵循项目的 ESLint 和 Prettier 配置。
- 提交信息：使用清晰的提交信息，描述更改的目的。
- 测试：确保你的更改通过了所有测试。
---
## 路线图
以下是 DrawText 的未来开发计划：
### 短期目标
- 支持更多绘图工具和文本编辑插件。
- 增加 AI 辅助功能，如自动生成图表或文本建议。
### 长期目标
- 开发移动端应用，提供跨平台支持。
- 支持离线模式，提升用户体验。
---
## 许可证
DrawText 采用 **MIT 许可证**。详情请参阅 [LICENSE](https://github.com/geallenboy/drawText/LICENSE) 文件。
---
## 支持与反馈
如果你有任何问题或建议，欢迎通过以下方式联系我们：
- **GitHub Issues**：提交问题或功能请求。
- **电子邮件**：[email protected]
- **WX**：加入我们的 gegarron
---
## 致谢
感谢以下开源项目对 DrawText 的支持：
- [EditorJS](https://editorjs.io/)
- [Excalidraw](https://excalidraw.com/)
- [React](https://reactjs.org/)
- [Node.js](https://nodejs.org/)
- [Nextjs](https://nextjs.org/)
- [Vercel](https://vercel.com/)
---
**DrawText** - 让创意表达更加自由和直观！ 🚀