TextBus 是一个通过自建数据模型、内置 Diff 算法、以数据为核心驱动的富文本编辑器。
同时，TextBus 拥有非常好的可扩展性和定制能力，你可以基于 TextBus 的数据模型扩展自己的组件（Component）、格式（Formatter）及工具。当然，内置的组件、格式、工具、插件等，你也可以随意添加和删除。甚至，你也可以把 TextBus 当成一个源码生成器，通过定制组件的 render 方法，输出 Vue、React 或 Angular 的模板源代码。因此 TextBus 拥有类似于建站工具的能力。
安装
通过 npm 安装 TextBus：
npm install @textbus/textbus
在 html 中准备一个空的元素
<body> <div id="editor"></div> </body>
通过 css 选择器，或直接传入一个 DOM 元素初始化 TextBus。
import { createEditor } from '@textbus/textbus'; import { Observable } from 'rxjs'; const editor = createEditor('#editor', { uploader(type: string): string | Promise<string> | Observable<string> { // switch (type) { // case 'video': // console.log('上传视频'); // break; // case 'image': // console.log('上传视频'); // break; // case 'audio': // console.log('上传音频'); // break; // } return Promise.resolve().then(() => { return '/test' }) }, content: `<p>欢迎你使用 <strong>TextBus</strong> 富文本编辑器...<br></p>` }); editor.onChange.subscribe(() => { console.log(editor.getContents()); });
官网地址
为什么要开发 TextBus？
众所周知，富文本编辑器一直是前端开发领域的一个天坑。但同时市面上的富文本编辑器却又数不胜数，那为什么我还要另起炉灶呢？
- 目前大多数富文本内容都太脏了，比如，加粗一段文字，可能是一个 strong 标签，也有可能是多个，如果这段文字同时还有其它格式，那么就更热闹了，基本处于一个不可控的状态。能把显示状态和编辑处理成正常的，就算很不错的编辑器，基本不会管内容脏不脏的问题。
- 目前比较新的编辑器，基本都有自己的一套抽象数据结构来描述富文本，这同时又引起了另一个问题，即这一数据结构对有的富文本内容描述不了，导致要扩展特定的格式不能实现。
- 部分富文本编辑器依赖特定的框架或库，造成使用上的限制。
- 扩展困难，不能方便的扩展格式、组件和模板，也不方便定制特定的编辑行为。
- 实时的代码高亮，这个对程序员写文档来说，是一个比较重要的功能。
- 对于粘贴进来的内容，要么粗爆的只是提取文本内容，导致格式丢失。要么就直接扔进页面，产生非常多的脏数据（如粘贴 word 的内容），虽然有的编辑器做了过滤，但基本不能做到完全剔除脏数据。
- 粘贴进来的资源不能触发上传行为。
对于以上所列举的只是部分问题，有问题虽然不好，但也不完全是坏事，这时就需要 TextBus 来解决这些问题。针对上面的问题，TextBus 解决如下：
- TextBus 输出非常干净，没有冗余的标签及样式。
- TextBus 没有定义一个标准的数据结构，只抽象出了 Formatter（格式） 和 Component（组件）两个维度的数据来格式化富文本的 Content（内容）。现在大家日常基本都是组件化开发，TextBus 也有自己的组件，你可以像写 Vue/React/Angular 组件一样，来写 TextBus 的组件，只要你愿意，没有什么效果是实现不了的。
- TextBus 不依赖特定的库，开箱即用。
- TextBus 扩展真的很简单，如果你使用 Typescript 开发的话，IDE 会给你非常好的代码提示，你只需要实现对应的接口，其它的就交给 TextBus 帮你处理。
- 实时代码高亮，在 TextBus 里真的不是问题。
- 由于 TextBus 的架构设计天然的支持过滤脏内容，所以，当粘贴进 TextBus 不认识的数据时，会自动忽略掉，而不会遗留在最终的结果里。
- 粘贴进来的资源上传，会自动分析，并触发上传。
当然，除了上述列举的问题，其实大家可能还有更多的需求亟待解决，这里就不一一阐述了，欢迎大家试用，并给出评价。更欢迎提出问题，要是能一起来完善 TextBus，那就更好了！
开发环境
对于一部分需要更详细了解 TextBus 原理，需要本地调试的开发者来说，可以通过以下方式在本地运行 TextBus。
TextBus 采用 lerna 作为多模块管理工具。如果你没有安装，请先安装 lerna。
npm install -g lerna
在项目根目录，通过 lerna 安装本地依赖
lerna bootstrap --hoist
启动项目
npm start
至此，你就可以在浏览器看到开发版本的 TextBus 效果了
-
Django集成UEditor (封装成应用) 百度富文本编辑器 http://ueditor.baidu.com/website/ 使用效果 测试环境 ubuntu 16.04 python3.5.2 django1.11.7 目前测试解决了出现的以下两个问题,都是python版本问题 error1 # name 'file' is not defined controller.py 68行
-
富文本编辑，又称为WYSIWYG（What You See Is What You Get，所见即所得）。在网页中编辑富文本内容，是人们对Web 应用程序最大的期待之一。虽然也没有规范，但在IE 最早引入的这一功能基础上，已经出现了事实标准。而且，Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这一技术的本质，就是在页面中嵌入一个包含空HTML 页面的iframe。通
-
uniapp能在app端编辑的富文本编辑器并且能够在pc端编辑的富文本编辑器有什么插件啊？求推荐大佬们推荐一个。。。。
-
本文向大家介绍使用Python读写文本文件及编写简单的文本编辑器，包括了使用Python读写文本文件及编写简单的文本编辑器的使用技巧和注意事项，需要的朋友参考一下 学习raw_input和argv是学习读取文件的前提，你可能不能完全理解这个练习，所以认真学习并检查。如果不认真的话，很容易删除一些有用的文件。 这个练习包含两个文件，一个是运行文件ex15.py，一个是ex15_sample.txt。
-
本文向大家介绍JS开发 富文本编辑器TinyMCE详解，包括了JS开发 富文本编辑器TinyMCE详解的使用技巧和注意事项，需要的朋友参考一下 一、题外话 最近负责了一个cms网站的运维，里面存在很多和编辑器有关的问题，比如编辑一些新闻博客，论文模块。系统采用的是FCKEditor，自我感觉不是很好，如下图 特别是在用户想插入一个图片的话，就很麻烦，所有用户共享一个文件目录，这样就不好了，于是便想
-
本文向大家介绍iOS实现富文本编辑器的方法详解，包括了iOS实现富文本编辑器的方法详解的使用技巧和注意事项，需要的朋友参考一下 前言 富文本编辑器不同于文本编辑器，国内做的比较好的比如有百度的UEditor和kindEditor。但是这两个也有它的缺点：界面过于复杂、不够简洁、UI设计也比较落后、不够轻量化，这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器。 实现的效果 解决思路 采用web
-
本文向大家介绍Vue-Quill-Editor富文本编辑器的使用教程，包括了Vue-Quill-Editor富文本编辑器的使用教程的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图： 1、下载Vue-Quill-Editor 2、下载quill（Vue-Quill-Editor需要
-
本文向大家介绍Vue中Quill富文本编辑器的使用教程，包括了Vue中Quill富文本编辑器的使用教程的使用技巧和注意事项，需要的朋友参考一下 在项目中需要引入Quill文本编辑器，并且根据需求，需要自定义字体选项、图片拖拽上传和改变大小，所以根据Quill官网系统学习了一下，以下是我学习和研究的结果。 一、主题 Quill的富文本编辑器分为snow和bubble两种。 snow是有工具栏的，如下