Skip to content
View textbus's full-sized avatar

Block or report textbus

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
textbus/README.md

Textbus

🚀 Textbus 是一个组件化、跨平台、数据驱动的富文本框架,支持使用 Viewfly、Vue、React 渲染富文本内容,并坚定的支持在线多人协作。你可以在 Textbus 中轻松创建出类似钉钉文档、石墨文档、飞书文档等完全自定义的编辑器。

官方文档

Textbus 官方文档

XNote 编辑器

XNote 是 Textbus 官方基于最新 4.0 版本开发的一个无头的、高性能的开源富文本编辑器。提供了开箱即用的大多数功能。也为需要自己开发编辑器的开发者提供了第一手的参考资料,仓库地址: https://github.com/textbus/xnote

你也可以直接查看在线演示:在线演示

介绍

我们一直致力于让富文本开发也能像普通前端框架一样,通过简明易懂的 api 和少量的约定,即可开发出使用流畅、交互丰富的富文本应用。

为了解决传统富文本开发的难题,Textbus 首次在富文本中引入了组件的概念,这让富文本开发就像拼积木一样,不再是前端领域不可跨越的天坑。不管你是富文本开发领域的老鸟,亦或是前端的新手,Textbus 都将帮助你把富文本做得更好。

Textbus 的特点

  • 组件化:根据富文本的特点而专门开发的组件化系统,让富文本编辑支持复杂布局,插入特殊控件等就像现代前端框架一样,非常的简单。
  • 完全可控:由于 Textbus 采用完全的数据驱动,输入输出完全依赖内核来完成,在不同的浏览器上,不会存在不一样的行为和结果。
  • 易扩展:hooks 风格的扩展代码,让你在不同上下文中对同样事件定制不同的行为变得异常简单。原生支持多种前端框架渲染,让你编写复杂交互更容易。
  • 语法糖支持:高度灵活的语法糖支持,你可以非常灵活的定制输入实时转换功能,如 Markdown 中的 # 号 + 空格变为标题等,你也可以完全自创语法,只要你开心。
  • 格式兼容:完全可定制的文档解析能力,可以让你最大可能的保持从网页、word 等其它页面复制过来的内容和格式。
  • 格式限制:既可以做到组件深层次嵌套,也可以做到像现在大多数编辑器一样 block 化。
  • 转换便捷:内置功能强大的格式转换能力,这也是富文本的难点之一,尤其是对于支持树状数据结构的编辑器来说,要实现这一点非常复杂。
  • 支持在线协作:Textbus 官方目前提供了基于 Yjs 的协作能力支持,你也可以采用其它的协作方案来对接 Textbus 的数据模型。
  • 高度抽象:完全抽象的光标和选区系统,你不需要再关心浏览器复杂的选区问题。

模块

模块 作用
@textbus/core 核心模块,提供了组件、插槽、格式、属性的数据模型抽象和选区、格式变换、渲染、组件生命周期管理、编辑器控制、历史记录、快捷键管理、语法糖管理、输出转换等富文本核心能力的实现
@textbus/platform-browser 浏览器支持中间层,提供了基本的视图层,桥接了选区、光标、和 DOM 渲染能力
@textbus/collaborate 协作支持模块,提供了基于 Yjs 的协作对接能力
@textbus/adapter-viewfly Textbus 视图渲染 Viewlfy 适配器,可使用 Viewfly 渲染富文本内容
@textbus/adapter-vue Textbus 视图渲染 vue 适配器,可使用 vue 渲染富文本内容
@textbus/adapter-react Textbus 视图渲染 react 适配器,可使用 react 渲染富文本内容
@textbus/platform-node 适用于 node 后台运行的 Textbus 的实用工具集

本地开发

Textbus 采用 pnpm 作为多模块管理,全局安装 pnpm。

npm install pnpm -g

克隆 Textbus 仓库,并安装依赖。

git clone git@github.com:textbus/textbus.git
cd textbus
pnpm install

启动开发环境。

npm start

赞助

Textbus 的成长离不开社会的支持,如果 Textbus 为你带来了帮助,并且你也认同为知识付费,同时鼓励我们做的更好,欢迎通过下面的二维码表达你的支持

Popular repositories Loading

  1. textbus textbus Public

    Textbus 是一个组件化的、数据驱动的富文本框架,支持在线协同编辑,拥有非常好的扩展性和可定制性,可使用 Viewfly、Vue 或 React 直接渲染富文本,是构建复杂富文本的不二之选!

    TypeScript 1.2k 133

  2. xnote xnote Public

    xnote 是一个无头、高性能的富文本编辑器,支持多人在线协作。

    TypeScript 60 12

  3. vue-demo vue-demo Public

    使用 Vue 开发 Textbus 富文本编辑器演示项目

    TypeScript 7 2

  4. textbus-1.0 textbus-1.0 Public

    textbus 1.0 源代码

    TypeScript 2

  5. textbus.io textbus.io Public

    textbus 官方文档

    TypeScript 1 1

  6. y-websocket y-websocket Public

    Forked from yjs/y-websocket

    Websocket Connector for Yjs

    JavaScript