GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → textbus → textbus

textbus / textbus

Licence: GPL-3.0 license
Textbus 是一个组件化的、数据驱动的富文本框架，支持在线协同编辑，同时也可以作为一个开箱即用的富文本编辑器，拥有非常好的扩展性和可定制性，是构建复杂富文本的不二之选！

Programming Languages

typescript
32286 projects
HTML
75241 projects
SCSS
7915 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
Vue
7211 projects

Labels

wysiwygcollaborationrich-text-editorwysiwyg-editorrich-textwysiwyg-html-editorcollaborative-editingcollaborative-framework

Projects that are alternatives of or similar to textbus

Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-56.07%)
Mutual labels:  wysiwyg, collaboration, rich-text-editor, wysiwyg-editor, rich-text, collaborative-editing
Etherpad Lite
Etherpad: A modern really-real-time collaborative document editor.
Stars: ✭ 11,937 (+1759.35%)
Mutual labels:  collaboration, rich-text-editor, collaborative-editing, collaborative-framework
wysiwyg-editor-dotnet-sdk
.NET SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 23 (-96.42%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, wysiwyg-html-editor
wysiwyg-editor-php-sdk
PHP SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 37 (-94.24%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, wysiwyg-html-editor
Ng Quill
AngularJS Component for Quill rich text editor
Stars: ✭ 223 (-65.26%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, rich-text
wysiwyg-editor-python-sdk
Python SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 20 (-96.88%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, wysiwyg-html-editor
Flutter Quill
Rich text editor for Flutter
Stars: ✭ 177 (-72.43%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, rich-text
Wysiwyg Editor
The next generation Javascript WYSIWYG HTML Editor.
Stars: ✭ 4,756 (+640.81%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, wysiwyg-html-editor
wysiwyg-editor-node-sdk
Node.JS SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 25 (-96.11%)
Mutual labels:  wysiwyg, wysiwyg-editor, rich-text, wysiwyg-html-editor
Angular Editor
A simple native WYSIWYG editor component for Angular 6 -10+
Stars: ✭ 428 (-33.33%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, rich-text
Element Tiptap
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
Stars: ✭ 481 (-25.08%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, rich-text
Textbus
基于组件 + 数据驱动的现代富文本编辑器
Stars: ✭ 242 (-62.31%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor, rich-text
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+180.53%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Ngx Quill
Angular (>=2) components for the Quill Rich Text Editor
Stars: ✭ 1,382 (+115.26%)
Mutual labels:  wysiwyg, rich-text-editor, rich-text
Wangeditor
wangEditor —— 轻量级web富文本框
Stars: ✭ 12,792 (+1892.52%)
Mutual labels:  wysiwyg, wysiwyg-editor, rich-text
Tinymce
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Stars: ✭ 10,179 (+1485.51%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-html-editor
bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (-15.73%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
Tiptap
The headless editor framework for web artisans.
Stars: ✭ 13,629 (+2022.9%)
Mutual labels:  wysiwyg, wysiwyg-editor, rich-text
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+1715.11%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
wysihtml5-rails
A wysiwyg text editor for use in the Rails asset pipeline
Stars: ✭ 28 (-95.64%)
Mutual labels:  wysiwyg, rich-text-editor, wysiwyg-editor
View All Similar Projects ➔

Textbus

如果你还在使用 1.0 版本，源代码请访问 Textbus 1.*

Textbus 是一个组件化、跨平台、数据驱动的富文本框架，并坚定的支持在线协同。使用 Textbus 你可以轻松创建你自完全自定义的编辑器。

我们一直致力于让富文本开发也能像普通前端框架一样，通过简明易懂的 api 和少量的约定，即可扩展出健壮的、符合预期的富文本编辑器。在 Textbus 1.0 的时，我们为此做了非常多的探索和努力，取得了不错的成果，但也因为如此，1.0 的设计在某些方面还留下一些遗憾。

幸运的是，Textbus 2.0 已经到来，我们在 1.0 的成果之上，重新设计了整个架构，致力于更简洁的 api，更友好的开发接入方式。

  • 重新设计了组件系统，去掉了大家难以理解的装饰器，改为用类似 vue 的 setup 形式开发组件，并提供了一系列的 hooks 供大家定制交互行为
  • 重新设计了数据模型，可根据用户的操作生成特定的底层原子命令，这让细粒度的历史记录和文档协同成为可能
  • 核心架构脱离了具体平台，让 Textbus 的能力不仅限于在 PC 端，通过编写特定的中间层，可以方便的在移动端，甚至小程序上实现丰富的富文本能力
  • 重写了渲染层，现在 Textbus 2.0 大多数情况下更新视图仅需要 0.2ms 时间，比 1.0 性能更好

安装

Textbus 可能通过两种方式引入到你的项目中。

通过 npm 安装

npm install @textbus/core @textbus/browser @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'))

通过 script 标签引入

<!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>

官方文档

Textbus 官方文档

本地开发

Textbus 采用 lerna 作为多模块管理，全局安装 lerna。

npm install lerna -g

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

git clone [email protected]:textbus/textbus.git
cd textbus
lerna bootstrap --hoist

启动开发环境。

npm start

联系我们

如果在官网还不能找到你想了解的问题，你可以加入 Textbus 的官方 QQ 群：786923770。你也可以直接扫码加入：

赞助

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].