js富文本编辑器插件（知乎用的是什么富文本编辑器）

本文目录

• 知乎用的是什么富文本编辑器
• PC/移动端的富文本编辑器wangEditor的使用
• 富文本编辑器之游戏角色升级ing
• 轻量级富文本编辑器quill editor结合iview的使用
• 富文本编辑器应该如何使用
• 如何实现一个 Android 端的富文本编辑器
• vue富文本编辑器自定义插件怎么引入
• 富文本编辑器是什么意思
• 富文本编辑器-1-选型
• 有哪些比较轻的富文本编辑器

知乎用的是什么富文本编辑器

原理实践

富文本器，Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft Word 的功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本器成为可能。

在很多开发者看来，富文本器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话，确实如此。但是它的基本原理并不复杂，入门也不难。今天我们的主题是讲述基本原理，并逐步演示一个简单富文本器的产生。这是我在D2上的一个分享内容，在台上的演讲效果不佳，故写下来，希望能够对感兴趣的读者有所帮助。

基本原理

这个原理实在是太简单了！对于支持富文本的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand(’commandName’) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execCommand(’bold’, false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。

为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentWindow.document 获得）进行操作。

十分简单，是吧？下面我们来动手做一个。

简单

这个例子使用了YUI. 即使你对它不是很熟悉也没有关系，我在这里只使用了它的 DOM 和 Event 的一些跨平台基本方法。

搭架

在此强调一下很久未曾提及的 unobtrusive. 我们的器是对 textarea 元素的一个增强（enhencement），就是说，即使 JavaScript 被禁用了，用户还可以通过 textarea 内容。

在这个例子中，我们将数也只有 textarea 一个。我们使用一个实例变量来保存工具条的各个项目。实例初始化放到一个叫 render 的方法中。这一步的页面和代码见第 1 步。

创建 iframe 并替换 textarea

搭好架子，正如我在前面所说，建立一个 iframe, 器的所有操作都在 iframe 的 document 内执行。并且把 textarea 隐藏起来。从第 2 步中可以看到，我们已经有了一个 iframe, 但不能输入任何东西，很正常，我们没有打开它的 designMode 嘛。

开启 designMode

这一步涉及的东西挺多，也是关键。我们会创建获取 iframe 的 document 的方法，并通过程序的方式向 iframe 写入空页而非使用一个外接的 blank.html. 我们使用一个类属性 YAHOO.realazy.RTE.htmlContent 来保存空页的 html. 在准备好一切后，就可以开启 designMode 了。页面和代码详见第 3 步。看，我们已经可以在 iframe 里输入东西了。

构建工具条

我们需要操作的工具条！这样才可以控制 iframe 里的内容，才能称之为器。在此我并不打算实现太多的功能，只是选择字形、加粗、斜体、下划线、居左、居中、居右、超链接和插图作为示例。对于跨平台，Mozilla Midas Specification是不错的参考。ok, 请看第 4 步，我们的工具条出来了，虽然很丑。我同时用 CSS 对 iframe 的宽度做出了一些调整。

给工具条加件

嗯，工具条出来了，器看起来也“人模狗样”了，你兴奋的点啊点，没什么效果……意料中嘛。我们接着给工具条绑定一些事件，让器内容能够响应工具条。在这一步，我们把 execCommand 再封一层，前面说过，我们上 UIFlag，让它永远是 false 好了。好，有代码就有真相，请看第 5 步。如果是正使用 IE, 请先暂时转移到其它浏览器。看到了吧，工具条生效了！

解决 IE 的问题

well, 如果你没有听我的劝告，依然使用 IE, 你会发现除了字型和字号其它的都不能用。为什么呢？你观察一下有发现，其它浏览器选择文本后，再点击工具条上的项目，被选中的文本是否依然选中的？而 IE 呢，在点击工具条时，选中的文本马上失去选中的状态，所以它们就失败了。所以，如果我们能够保证点击工具条文本保持选中状态，就可IE的问题了。

Microsoft 给 HTML 标签一个很奇怪的属性 unselectable, 只要设置为On不会转移到点击的元素上，从而保证文本的选中状态。

请看第 6 步。这也是解决 IE 头痛问题的关键所在。我曾经在这上面费了很大脑筋。

PC/移动端的富文本编辑器wangEditor的使用

在刚开发的项目之中，在移动端/PC端，需要一个富文本器，要求：简单-轻量-实用。比较了几种器后，选择了wangEditor。
移动端的截图（手机效果好些）：

PC端的截图：

***隐藏网址***
先说配置：在PC端直接引入 wangEditor.js来创建，在移动端用的vue.js模块开发，所以用的： npm install wangeditor 来安装。

移动端：
1 . import wangeditor from ’wangeditor’ 来引入

2 . this.editor = new wangeditor (’#div1’)

4 .配置需要的选项，具体的到官网查看

5.常用的配置：

6 . this.editor.create(); //创建器，到这里创建就完成了。

7 . 但是你去发现在移动端，会不怎么适配，这时候就需要用 rem 来做适配。

如果：想要自己改变样式，那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ，来自行修改。

PC端：在确保引入wangEditor.js之后，在之后的js中，写入：

富文本编辑器之游戏角色升级ing

想必大家看到这个标题，心中不禁会浮现几个问题：

什么是富文本器 ——富文本器集成了格式设置、媒体嵌入、社交互动等一系列功能，所见即所得的给用户提供多元的展示效果。譬如论坛、社区、评论等等都用到了富文本器。

和游戏角色的关系 ——富文本器和游戏角色有很多共通之处，为了让富文本器的介绍更加有代入感，本文将采用游戏角色类比的方式进行讲解。至于共通之处体现在哪里，后面将一一介绍。

为什么是升级ing ——“升级ing”代表持续的进行时，本文的目的是聚焦富文本器的共性问题，抛砖引玉，希望能给大家提供一些解决思路。富文本器一直在持续发展中，而对于共性问题的探索也从未停歇过。

本篇文章主要分为五个部分：

本文通过游戏角色类比的方式，希望能够让富文本器接触较少的开发者，都可以深入的了解富文本器。今天，我们就一起来探讨下在富文本器选型、扩展过程中遇到的共性问题。

通常，我们在选择一款新的游戏之前，都会选择先去官网、论坛了解游戏资料，从中筛选出有效信息，辅助我们选择合适的角色。

开发人员在接到富文本器需求时，也不会随便选择其中一个，而是基于庞大的数据进行技术选型。这一节内容，就是为后续的选型所做的准备工作。

游戏角色在开服上线前，都会默认配备不同的风格，则风格往往决定了我们对于角色的初始印象。

富文本器同样具有几种常用的初始形态，经典模式、文档模式、内联模式，如下图所示：

那么从上图的对比中，可以看出来：富文本器必不可少的组成部分是内容区域。状态栏是用来记录时的相关数据，可以隐藏。而工具栏则可以任意调整显示的位置、时机甚至切换至幕后操控（通过快捷键等方式触发）。

反之，我们可以获得这样一条讯息：通过工具栏、内容区域、状态栏、菜单栏的不同组合可以赋予富文本器不同的展示形态。

游戏中的角色都是可成长角色，在成长过程总会出现一些 瓶颈期 ，而跨过所谓的瓶颈期之后，角色的能力将出现显而易见的改变。

在整个发展过程中，富文本器遇到过一些困境。也正是因为这些困境，可以将发展历程分为L0、L1、L2和L3阶段。

L0-》L1

L0，即初代的富文本器，依赖于浏览器自身的execCommand，仅提供了有限的命令，实现最简单的功能。随着对样式越来越丰富的要求，此时的富文本器无法满足需求，L1阶段的器应运而生。L1的富文本器采用 自定义execCommand 的方案，可以实现更加丰富的富文本功能。

L1-》L2

L0、L1的富文本器，仍然都是通过execCommand修改HTML。而不同浏览器中，对于同一表象的富文本，其HTML结构可能大不相同。

比如说 加粗 ，其HTML可能是《strong》加粗《/strong》，可能是《b》加粗《/b》，也可能是《strong》《strong》《/strong》加粗《/strong》等等。为了解决数据与视图无法一一对应的问题，提出了 自定义数据模型 的概念。

自定义数据模型 ， 是富文本器在富文本HTML-DOM树的基础上抽离出来的数据结构，相同的数据结构可以保证渲染的HTML也是相同的。自定义的命令直接控制数据模型，最终保证渲染的HTML文档的一致性。

对于相同的HTML，不同的富文本器最终呈现的数据模型并不相同。以 Hello EditorName 为例，这里对比了Quill、ProseMirror、Draft、Slate的数据模型如下：

L2阶段的富文本器，通过抽离数据模型，解决了富文本中脏数据、复杂功能难以实现的问题。通过数据驱动，可以更好的满足定制功能、跨端解析、在线协作等需求。

L2-》L3

到L2阶段的器，可以满足绝大部分的使用场景。那为什么后面又发展出L3呢？

这是因为，L0-L2的富文本器都是基于浏览器的contentEditable，在修改数据模型时，往往需要对用户操作进行拦截。对用户行为进行拦截是很难控制的，再加上不同浏览器的兼容问题，很容易出现bug。

为了解决contentEditable不可控的问题，以 Google Docs 为代表的器通过“ 自研排版引擎” 步入了L3阶段。

自研排版引擎，彻底抛弃了contentEditable，通过自行控制光标位置、选区绘制、排版、监听输入等行为，实现和浏览器相似的效果。“自研”，无疑具备了更高的扩展性。但与此相对应的，其开发难度高、成本高、隐性问题多，在整体体验和性能上与原生浏览器渲染仍存在一定差距，该阶段的器还有一段路要走。

回顾富文本器的发展历程，不难发现：富文本器的结构脱离不了模型、视图、控制器这三大模块。如下图所示：

正如游戏角色所 突破的瓶颈期 ，富文本器在L1跃迁至L2发生的改变是：自定义数据模型的抽离；L2跃迁至L3的改变则是：排版引擎的全新定义。

当我们已经通过各种渠道了解到游戏背景、人物资料之后，下一步就要登录游戏创建游戏角色。此时，新手常常遇到的困扰无疑就是：如何选择最合适自己的游戏角色。

类似的，对初次接触富文本器的小伙伴来说，常提到的问题是：我该选择哪款富文本器？

首先，可以根据你的业务需求，选择对应阶段的富文本器：

其次，在选定好阶段的基础上，根据项目架构（Vue、React、Augular等），以及富文本器自身的特点，选择适合的器就可以。可以从下述几个方面考虑：

以上，就是我梳理的选型套路。像是CKEditor、TinyMCE、Quill等都是有口皆碑的，大家在选型的时候不妨可以考虑下这些器：

选择合适的角色，仅仅只是游戏的开始 。在游戏过程中，需要不断地调整游戏角色的技能树，将其潜力发展到极限。

随着业务的不断发展，对富文本器也会提出更高的要求。对此，经常困扰开发人员的往往就是以下几个问题：

1、如何快速的扩展富文本功能？

2、如何快速的让器改头换面？

对于以上两个问题，下文将从 能力扩展、主题改造 两个方面进行分析。

本节内容不会聚焦某个富文本器具体如何扩展，而是针对上述不同扩展方式分享一些通用的处理思路。

就像是游戏角色中，通过道具的不同装配方案，调整最终的战力数据。工具栏扩展就是通过对工具栏中不同功能的组合及改造，满足最终的业务需求。

常见的工具栏是由若干个功能按钮、状态按钮组、下拉菜单、模态框等组成，如下图所示：

一般的，富文本器中都具备管理工具栏的配置项，可根据需要查阅官方文档。这里我们探讨一种场景， 如何对已有的功能按钮进行扩展？

以“Quill器字体高亮的功能”为例——该功能按钮的颜色与光标位置的字体颜色相呼应，从而达到绑定变化的效果，如下图所示：

那么，如果项目中引入的富文本器不提供这样的能力，该如何处理呢？这里提供了两种方案：

1）控制功能按钮原生的UI样式。

以下图Tiny的字体高亮功能为例，按钮是svg的结构，可通过控制strokeColor/fillColor达到效果。此时只需要在器中增加光标位置变化的监听OnSelectionChange，获取光标位置的字体高亮颜色，重置按钮UI。

2）SVG图标替换当前的按钮。

当功能按钮是通过图片的方式呈现，很难控制UI变化时，就可以采用此方案。以SVG图标替换图片图标，通过变更svg-path的strokeColor/fillColor，达到相同的效果。

小结：如果项目是初次引入富文本器，这里不妨参考 4.2主题改造中方案二 。

“ 菜单栏扩展 ”类似是给游戏角色的装备增加一些辅助的技能，这些新增的能力依托于装备，每个装备所配备的能力也互有差异。

本节所说的菜单栏，特指器内部的内联菜单栏。比如图片工具栏、表格工具栏、右键菜单栏等。如下图所示：

对菜单栏来说，最常出现的需求就是： 给现有的插件新增菜单栏，如何实现呢？

1）富文本器提供关联配置能力，直接按照 API文档配置即可 。这里摘取了Tiny器中部分菜单栏的配置方案，如下图所示：

2）不具备关联配置能力，此时需要监听光标位置的变化。当光标在对应富文本数据区域内变化时，触发事件/命令控制此菜单栏展示。

不管是以上哪种方案，扩展的菜单栏可以选择内置到器中实现，也可以通过事件抛出到器外部，以自定义组件的形式关联。我比较推荐使用自定义菜单栏组件的方案：

对于游戏角色的战力提升而言，道具和装备都属于外力上的加强，角色本身也是需要重点关注的。

在富文本器发展历程一节中，总结出 富文本器的结构脱离不了模型、视图、控制器这三大模块 ，那么从这三个模块出发，扩展的方案也有所区分。

数据模型扩展

之前的介绍中提到过，L1-L2阶段变迁的关键行为是 抽离自定义数据模型 。富文本器的数据模型决定了最终富文本渲染的结构。当某个预置的富文本结构不能满足预期时，就需要对这个富文本的数据模型进行扩展。根据富文本器是处于L2阶段前或阶段后，扩展方式也有较大区别。

1） L2阶段及之后 富文本器已具备数据模型抽象能力，此时只需要在数据结构中新增/定义好的数据对象，并绑定渲染的HTML结构即可：

2） L2阶段之前 ， 富文本数据未进行数据模型的抽象。针对这种场景，可以利用html-parse-stringify插件，自行抽离数据模型，再进行数据扩展。以 《p》hello 《b》HTML-parse-stringfy《/b》 ！《/p》为例，可以转化为下图所示的数据结构：

视图扩展

视图应该比较好理解，属性数据相同的角色，配备不同的皮肤或者技能特效，在战斗过程中的呈现效果不同。同一个富文本数据源，通过不同的视图扩展，就可以展示不同的视觉效果。

1） 不改变富文本的数据结构 ， 仅在样式设置上有所区分

通过切换DOM结构上绑定的class属性，切换不同的样式：

2） 直接改变富文本的数据结构

普通链接切换至卡片，数据结构由Inline-Block切换至Block（link-card），DOM渲染随之切换。DOM结构对比如下：

控制器扩展

控制器是比较抽象的概念，对游戏角色来说主要是用来控制技能触发条件、释放的时机、触发条件及属性影响之类的。

类似的，富文本器的控制器也是对数据层及视图层控制方式的统称。控制器的扩展，可以通过 事件、命令、配置项 等多维度实现。今天，我们简单聊一下 事件和命令 如何扩展。

1）事件的扩展

事件有点像是主动技能，由角色主动释放 。富文本器会主动抛出一些事件，实现在器内部或外部的控制，如OnselectionChange、OnInit等等。当新增的功能需要由器内部控制外部组件，且原生的事件无法满足时，往往需要通过新增事件监听的形式实现。

事件的扩展在跨端操作中非常有用，后续会在跨端实践一文中重点介绍。

2）命令的扩展

命令控制与事件控制逻辑相反，命令类似被动技能，当外部环境达到某个条件时，触发角色的某种操作 。富文本器的命令管理就提供了在器外部控制器内部操作的能力。当操作不在Commond命令库时，就需要对Command命令进行扩展。不同器对Command的扩展写法不同，但是万变不离其宗 —— Command的核心是exec、refresh。

除事件、命令外，部分器还可以通过扩展配置项等方式，达到定制化操作的目的。

要想将新技能的价值发挥到最大，不仅需要将角色的属性数据提升到合适的水平，还要灵活调配技能组，配置合适的道具装备等等。

富文本器新增一插件，往往需要多个模块共同扩展：

展开介绍下上图中的各个模块：

定义数据模型

通过 4.1.3 数据模型扩展 一节，我们可以发现：数据模型是新增富文本功能的核心。只有先确定好数据层，才能决定视图渲染如何控制，以及最终如何呈现在前端。

定义数据模型，主要分三步走：

1、确定数据模型的DOM是以Inline类型、Block类型还是可切换；

2、明确数据模型的准入限制及其可限制，例如说标题中不能嵌套超链接等类似的规则；

3、确定数据模型及其数据输入、数据输出；

输入-模型-输出的转化示例图,如下图所示：

自定义工具栏按钮

工具栏按钮是数据控制的窗口，可以外显在工具栏中，也可以隐藏通过快捷键控制。如果外显在工具栏中，需要根据具体需求，定制对应状态的功能按钮，绑定菜单或者控制操作，可参考 4.1.1工具栏扩展 一节。

新增事件或命令

确定好数据核心和控制窗口之后，下一步就是制订控制策略。首先确定需求中的控制策略，是正向的——由富文本器操作触发外部反馈，还是反向的——由外部触发器内部操作，还是两者皆存在。然后根据控制策略，对应的选择扩展事件、命令还是两者都扩展。具体扩展方案可参考 4.1.3控制器扩展 一节

关联光标选区

通过光标的位置，确定当前选区对应的数据结构，从而控制特殊状态的切换。怎么确定是否需要关联光标选区呢？

1、新增功能的按钮状态是否与光标位置有关。在自定义工具栏按钮这一步骤中就可以完成关联；

2、新增功能是否需要关联菜单栏显示。处理方案参考 4.1.2菜单栏扩展 一节；

3、新增功能是否与其他富文本功能相关联。如互斥逻辑 —— 标题内不允许插入超链接；

若确定需要关联光标选区，那么富文本器中就需要增加OnSelectionChange的监听，完成相关的处理。

关联操作记录管理（撤销、重做）

在富文本器中进行交互操作时，不可避免的会出现一些误操作。富文本器的交互场景越复杂，出现误操作的概率越高。因此一般富文本器都会对操作记录进行管理，用以降低误操作所带来的影响。

不同的富文本器中undo/redo的处理逻辑不同，相似的是富文本器会定义操作过程中的关键行为（如常见的插入、删除等），将其存储在操作记录中。

当我们在新增的插件功能中关联操作记录管理时，只需要复用其他插件关键行为的入库出库逻辑就可以啦。

增加复制粘贴控制

“复制粘贴”算是富文本器操作中最为头疼的问题之一，有相关开发经验的小伙伴们应该遇到过，从其他来源复制的内容粘贴到器内，视图展示异常的情况。针对这种情况，往往需要对剪切板中的数据进行过滤，转化为富文本器可识别的数据。

“主题改造”应该很好理解，就是游戏中的更换皮肤，快速的切换游戏角色的风格。

在富文本器中主题改造，其实也就是工具栏、菜单栏以及特殊富文本的样式上的更换。通常的处理方案有两种：

如果是对已有项目进行改造，那么需要考虑到新旧主题切换的投入产出比，择优选取；如果是新项目且对主题样式细节要求较高的话，可以采用方案二。

方案二相较于方案一来说：

小结 ：功能扩展和主题改造的方案不止以上这些，也存在其他折衷的方案，只需要根据业务场景选择合适的方案即可。有句话说的好： 「最好的不一定适合，适合的才是最好的」 。

至此，本篇文章的内容也就接近尾声了。希望大家看到这里，对于以下几个问题，能得到一些解答：

1、基于现在的业务需求，该选择哪款富文本器？

2、随着业务的扩展，该如何扩展富文本功能？

3、设计改版，如何快速的改头换面？

就像是在游戏世界中，你不得不打怪升级。同时在过程中，你也会积累更多的技巧，为之后的越级打怪打下坚实的基础。在富文本器开发过程中，确实会遇到很多难解的问题、复杂的需求，花费了我们大量的时间精力。在一次又一次的锤炼中，我们都将会有所收获，有所成长。

本篇文章分享了我在富文本器开发过程中关于共性问题的一些思考，希望能对即将参与富文本器开发的小伙伴，或者正在进行富文本器开发的小伙伴带来一些帮助。

后续还会跟大家分享一些富文本器在跨端方案解决上的一些经验，如果感兴趣的话可以持续关注。

参考资料

轻量级富文本编辑器quill editor结合iview的使用

vue-quill-editor是我们在使用vue框架的时候常用的一个富文本器，在进行富文本的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。 因此，在富文本的过程中，对于图片的处理，我们更合理的做法是将图片上传到服务器，再将得到的图片链接插入到富文本中，以达到最优的体验。

首先安装quill editor       npm install vue-quill-editor --save

全局挂载  

在main.js中引用

使用

在需要用到富文本的vue中引用和配置quill editor工具栏
在editorOption中的handlers事件中处理图片上传（配置中的handlers是用来定义自定义程序的）

iview自带的upload上传自带三个函数

在methods里面处理一下图片
如果有错误，欢迎大家多提提意见~

富文本编辑器应该如何使用

富文本器是一种可以让用户输入和富文本的器。在网页中，我们通常使用富文本器来输入和HTML代码。使用富文本器可以让你更加方便地编写HTML代码，而不需要手动输入每个标签。不同的富文本器有不同的使用方法，但通常都是通过在页面上添加一个容器元素来使用。例如，在Vue.js中使用富文本器，你需要先安装并引入相应的库，然后在模板中使用该组件即可 。

如何实现一个 Android 端的富文本编辑器

在 Android 上实现富文本器的思路大致分为三种：
　　使用多种 Layout 布局，每一种布局对应一种 HTML 格式，比如图片，比如顺序列表等。具体的实现例子可以参考这个链接。 Medium 和
Evernote 的富文本就是采用这种方式实现的。总体来说比较复杂。
　　WebView + JavaScript 实现。现在 Web 端有很多成熟的 JavaScript 富文本库，比如 Squire ，你只需要做好
WebView 和 JavaScript 的交互就可以了(多写回调函数)。理论上虽然是这么说，但是在实现过程你需要解决 WebView 的兼容性问题(
Android 4.4 及其以上版本和 4.4 以下版本的 WebView 内核不一样)，以及其他一些不可预见的问题(比如就遇到无法粘贴文字的问题)。
　　EditText + Span 。 Android 的 TextView 原生支持诸如粗体、删除线、引用等 Span
，要实现简单的富文本需求，可操作性还是比较大的。综合再三，选择了这种方式来实现自己的需求。
　　既然决定使用 EditText + Span 的方式来实现，必然要对相关的 API 有所了解。
　　首先来了解一下 Span 。Span 是一个强大的概念，有兴趣深入的同学推荐直接阅读这篇译文。
　　在这里主要使用两种类型的 Span ：
　　继承自 CharacterStyle 的 Span ，比如 StyleSpan ，可以在字符级别上添加粗体，下划线等。
　　继承自 ParagraphStyle 的 Span ，比如 QuoteSpan ，可以为段落级别的文本添加引用。
　　接着需要一个可以将 Span 的效果设置进去的文本结构(即实现了 Spannable 接口)， SpannableStringBuilder
是个不错的选择，同时 EditText 提供的 getEditableText() 方法也可以获得。通常只需要 getEditableText()
就可以了，但是在面对一些细节部分，可以使用 SpannableStringBuilder 预先设置相应的 Span ，再替换到原来的文本中。
　　设置 Span 的方式也很简单，需要调用 Spannable.setSpan(Object what, int start, int end, int
flags) 这个方法即可，方法中 4 个参数的解释如下：
　　Object what ，传入你使用的 Span 对象。
　　int start ，设置 Span 的开始位置。
　　int end ，设置 Span 的结束位置。
　　int flags ，代表设置 Span 的作用域。
　　在这里重点介绍一下 int flags 这个参数，它接受 4 种类型的参数，分别是：
　　Spanned.SPAN_INCLUSIVE_EXCLUSIVE ，表示你在设置 Span 的区域之前输入文字，输入的文字也会受到 Span
的影响。
　　Spanned.SPAN_INCLUSIVE_INCLUSIVE ，表示你在设置 Span 的区域前后输入文字，输入的文字都后受到 Span
的影响。
　　Spanned.SPAN_EXCLUSIVE_EXCLUSIVE ，表示你在设置 Span 的区域中出输入文字，输入的文字才会受到 Span
的影响。
　　Spanned.SPAN_EXCLUSIVE_INCLUSIVE ，表示你在设置 Span 的区域之后输入文字，输入的文字也会受到 Span
的影响。
　　「受到影响」的意思就是，仍然会保持你设置的 Span 的样式，比如选择Spanned.SPAN_EXCLUSIVE_INCLUSIVE
设置了一段文字的粗体，那么在这段文字后新输入的文字，也会是粗体。在这里推荐使用Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
参数，毕竟其他几种参数相对不是很好控制，而且会给使用的人带来的疑惑。认为一个操作代表的行为应当是准确没有歧义的。
　　好，到这里已经知道大致怎么作出一个富文本器组件的样子了，无非是指定开始位置和结束位置，再设置相应的 Span
即可。至于设置的时候采取什么样的规则，你可以自己定制。但仅仅解决了的问题，仍然存在导入的问题和导出的问题。
　　导入的问题十分简单， Android SDK 中提供了 Html.fromHtml() 这个方法，可以很轻松地将 HTML 字符串转换为所需的
Spanned 对象。但是需要注意的是， Html.fromHtml() 并不支持所有的 HTML 标签，比如无序列表就不支持，因此你需要自己实现
Html.TagHandler 接口来处理自己所需的标签，可以参考这个链接，实现了删除线和简单无序列表的支持。
　　面对粗体、斜体这样字符级别的样式， Html.fromHtml()
会自然而然的解析，该添加换行的地方就添加换行，并没有什么问题;但是面对引用、无序列表这样段落级别的样式，该方法会追加一个换行，也就是两个换行操作，相当于多出一个空行。通常来说认为一个
对应两个
，但是如果你有特别需求的话，也可以通过前面说的那样，自己来解析，而不是用系统默认的方式。
　　之前介绍了如何导入，想必你也十分清楚，必然有一个对应的Html.toHtml() 方法!没错，但是遗憾的是，这个方法也不全支持所有 Span
，比如列表就不支持。不过没有关系， Html.toHtml() 这个方法本身的源码简洁易懂，可以参考着实现。
　　在这里重点说明 Spannanle 的一个接口方法 nextSpanTransition(int start, int limit, Class
type) ，这个方法会在你指定的文本范围内，返回下一个你指定的 Span 类型的开始位置，依照这个方法，就可以逐层扫描指定的 Span
，而不用同时考虑其他类型的 Span 的影响，十分有用。
　　最后尽管说了这么多，导入导出还是有一个比较关键的问题，即导入的内容和导出的内容要保持一致，在这点上目前我还比较难以实现，只能说尽量控制吧，必要的时候还需要使用一下正则来处理导入导出的文本。

vue富文本编辑器自定义插件怎么引入

1、首先创建插件：在创建Vue富文本器时，需要使用use方法或extend方法来注册插件。
2、其次定义插件：在CustomPlugin插件中定义你的代码逻辑并导出设置。
3、最后引入插件：在你的Vue组件中可以通过this.$customFunc()来调用自定义插件方法。

富文本编辑器是什么意思

富文本器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本器。下面简单的介绍一下富文本器的用法和简要的原理。

1、什么是富文本器？

抛开专业的定义，用自己的话来介绍一下到底什么是富文本器。先举个简单的例子，大家大多都使用过网上的一些博客系统或者论坛贴吧吧，那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式，此时网页上会有一个设置这些信息的菜单或者是一个网页的文本器，这个就是富文本器的常见应用，如下图：

富文本器不同于我们平时的文本器，但是其功能确实和我们的平时使用的word的是类似的，只不过富文本器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本器的原理和应用

关于富文本器的原理，一些人可能以为富文本器的原理十分的复杂，事实上也并非如此，当然功能强大的器自然会很难实现。网页上的富文本器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码，其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本器的应用，比如做为一个网站的开发者，当我们需要一个发布文章的功能时候，用户可能不知道html代码，此时我们可以使用一些别人写好的富文本器嵌入到我们的程序中即可解决这一问题。

富文本编辑器-1-选型

团队的业务多为后台管理系统，部分业务需要使用富文本器。早期团队选用了百度器，但存在bug多、无人维护、扩展性差等问题，且后续业需要更灵活的器。为了解决这些问题，决定重选器。

基于以下原因，笔者决定使用Quill来开发团队的器组件：
1. Delta和API
Quill返回json结构的数据，有API操作器内部元素。也可以通过innerHtml获取dom。
2. 可定制
Quill可以修改、扩展现有的模块，也可以添加新的模块，甚至可以在parchment的基础上全部重写。有较强的灵活性。
3. 兼容性
当前版本兼容Chrome、IE11、Edge，已满足业务需求。
4. 与其他器比较
相比CKEditor、TinyMCE等传统器，有更好的API和定制功能。而Draft是基于React的器，需要自己实现数据层的内容，使用成本更高。国内的wangEditor功能比较全面，但不具备扩展性。

1. 基础文本模块
分割线、格式刷、段落、撤回和重做
2. 多媒体模块
图片上传模块
3. 其他模块
工具栏的Tooltip模块
4. 预览功能

图片上传主要取决于业务需求，我们可以改写图片的handler方法，打开一个模态框或者打开本地文件夹，调接口上传图片。通用点是保存的时候，用Delta保留前面的内容并插入图片内容，最后更新Quill。

由于图片上传、预览主要取决于业务需求，与器关系不大，后面不再提到。

有哪些比较轻的富文本编辑器

做过Web开发的朋友相信都使用过富文本器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本器都是使用JS编写，使用简单，非常轻量级。
1、NicEditor
NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可或者能够把标准的TextArea转换成富文本器。
NicEdit是我见过最轻量级的富文本器，总共就一个JS文件和一张图片
使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本器
2、KindEditor
KindEditor是一套开源的HTML可视化器，主要用于让用户在网站上获得所见即所得效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。