代码拉取完成,页面将自动刷新
🚀 Textbus 是一个组件化、跨平台、数据驱动的富文本框架,并坚定的支持在线多人协作。你可以在 Textbus 中轻松创建出类似钉钉文档、石墨文档、飞书文档等完全自定义的编辑器。
如果你还在使用 1.0 版本,源代码请访问 Textbus 1.*
我们一直致力于让富文本开发也能像普通前端框架一样,通过简明易懂的 api 和少量的约定,即可开发出使用流畅、交互丰富的富文本应用。
为了解决传统富文本开发的难题,Textbus 首次在富文本中引入了组件的概念,这让富文本开发就像拼积木一样,不再是前端领域不可跨越的天坑。不管你是富文本开发领域的老鸟,亦或是前端的新手,Textbus 都将帮助你把富文本做得更好。
模块 | 作用 |
---|---|
@textbus/core | 核心模块,提供了组件、插槽、格式、属性的数据模型抽象和选区、格式变换、渲染、组件生命周期管理、编辑器控制、历史记录、快捷键管理、语法糖管理、输出转换等富文本核心能力的实现 |
@textbus/platform-browser | 浏览器支持中间层,提供了基本的视图层,桥接了选区、光标、和 DOM 渲染能力 |
@textbus/collaborate | 协作支持模块,提供了基于 Yjs 的协作对接能力 |
@textbus/editor | 官方实现的一个简易的编辑器,提供了基本的文档编辑能力 |
@textbus/platform-node | 适用于 node 后台运行的 Textbus 的实用工具集 |
Textbus 可能通过两种方式引入到你的项目中。
npm install @textbus/editor
在 DOM 中准备好一个空的标签
<div id="editor"></div>
创建编辑器实例
import '@textbus/editor/bundles/textbus.min.css';
import { createEditor } from '@textbus/editor';
const editor = createEditor()
editor.mount(document.getElementById('editor'))
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/path/textbus.min.css">
<script src="/path/textbus.min.js"></script>
<title>Textbus 示例</title>
</head>
<body>
<div id="editor"></div>
<script>
var editor = textbus.editor.createEditor()
editor.mount(document.getElementById('editor'))
</script>
</body>
</html>
const editor = createEditor({
content: '<p>这里是默认内容</p>'
})
editor.destroy()
editor.focus()
editor.blur()
const html = editor.getHTML()
const json = editor.getJSON()
editor.replaceContent('<p>新内容!</p>')
editor.replaceContent({
// 必须为 Textbus 导出的 JSON 格式
})
editor.replaceContent('')
Textbus 采用 pnpm 作为多模块管理,全局安装 pnpm。
npm install pnpm -g
克隆 Textbus 仓库,并安装依赖。
git clone git@github.com:textbus/textbus.git
cd textbus
pnpm install
启动开发环境。
npm start
Textbus 的成长离不开社会的支持,如果 Textbus 为你带来了帮助,并且你也认同为知识付费,同时鼓励我们做的更好,欢迎通过下面的二维码表达你的支持
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。