富文本
文档 属性·动作·事件
常见功能
富文本组件是一种功能强大的文本工具。 它比纯文本对象支持更丰富的文本格式。 在编辑状态下，可以通过文本编辑区域进行文本编辑， 并通过上方属性控制条修改字体样式、对齐方式等， 如下图所示：
在项目运行状态下，则隐藏编辑区域，显示为预设样式：
该组件具有以下功能：
- 支持对文本框内的每个字符设置独立的文字体样式；
- 支持插入有序、无序项目符号；
- 支持图文混排、插入视频；
- 支持插入链接；
使用场景
富文本工具可以显示复杂的字体样式和排版方式，比普通文本更适用于网页图文内容的排版。
基本用法
1、富文本的内容编辑
富文本格式采用了特定的语法，包括未格式化文本、控制字、控制符号等组成部分。 例如下图中的一行文本，实际是由其下方的语法内容实现的：
使用富文本组件，用户无需编制该代码，只需在编辑状态下的文本编辑区域内键入文本，并使用工具条为其设定格式，系统将自动转换为代码：
富文本的内容除了包含用户实际键入文字外，还包含复杂的格式语法。 因此，在非编辑状态下需要通过修改代码-实现内容或格式的动态定义，无法通过简单的赋值或重新设置内容的方式来实现。
如果需要在非编辑状态下进行复杂编辑，建议与“富文本编辑器”配合使用。
Q&A
目录
生成富文本目录
富文本和富文本编辑器，都支持获取目录与滚动至目录功能。
通过这两个功能，我们可以轻松制作一个文本目录的功能。
首先，在富文本或富文本编辑器中，可以设置文本标题类型：
“Normal”即普通正文，heading1 - header4， 分别代表标题类型，header1最大，header4最小。每一种标题类型设置之后，还可以额外设置其他的样式。
编辑好一段示例文本后，我们就可以开始制作文档目录了。 在以上demo中，主要有四个目录相关的功能：
1、自动生成文档目录
2、点击目录，自动跳转到文档对应的位置
3、手动滚动文档，目录对应高亮
4、自动记录当前浏览位置，重新刷新网页，会自动跳转至之前的位置
1、自动生成文档目录
富文本与富文本编辑器，提供从文档中抽取目录的功能， 在以上例子中，我们在初始化的时候，调用了富文本编辑器的“获取子标题列表”动作：
获取之后，返回结果，是一个对象数组，包含三个字段：
- id：子标题ID，每个子标题-独立唯一的ID，在跳转至子标题时需要使用到；
- text：子标题文本，当前子标题在文档中显示的文本；
- type：子标题类型，为数值，
我们将获取之后的标题，赋值给一个对象数组，然后通过一个for列表，就可以将所有子标题显示出来了。 在for列表中，我们可以用- if容器，分别设置每一种标题类型的样式， 比如，级别越小的标题，字号越小，缩进越多：
注意，在以上demo中，我们使用了静态的富文本内容， 但在实际应用中，富文本内容通常是从数据库中获取的。 因此，我们需要在获取成功之后，再执行获取子标题动作，而不是在页面初始化时。
2、跳转至子标题
点击目录时，我们可以调用富文本/富文本编辑器的“跳转至子标题”动作：
注意，由于子标题文本可能是重复的， 因此在跳转时，我们需要指定子标题的ID。 在以上demo中，由于有四种目录标题文本， 我们将跳转子标题提炼成了一个动作组，子标题ID， 在调用动作时，传入当前目录的id即可：
同时，为了制作点击目录高亮的效果， 我们做了一个变量来记录当前指定的ID，并通过其来设置目录文本的颜色，详见demo；
3、手动滚动文档，目录自动高亮
除了可以点击目录，跳转到相应标题， 我们还希望可以在滚动时，自动标记当前视野中的目录。 此时，就要用到富文本的滚动事件，并在滚动时，实时获取每个子目录的位置：
位置数组中，和目录数组中的字段基本一致，但额外添加了一个新的字段：
- offsetTop: 当前目录距离富文本上边缘的位置，
获取到位置数组之后，我们对数组进行筛选， 输出offsetTop>0, 且大小最小的那一行：
在这里，可以直接使用对象数组的筛选输出动作， 筛选条件选offsetTop>0, 排序方式选offsetTop按数字升序， 获取到的第一行就是offsetTop最小的那个标题了。
接下来，我们将最小标题-的id赋值给当前ID，就可以实现高亮效果了。
4、在url参数中记录浏览位置，并在初始化根据url参数自动跳转至相应标题
首先，用户滚动或点击子标题时，我们将当前子标题的文本，设置为一个名称为“part”的hash参数：
在这里，我们设置了内容，而不是ID， 是因为内容更具有可读性，用户看到url就能知道子标题了。
在页面初始化时，我们再去获取子标题， 并查询出id进行跳转即可，具体做法详见demo。
若有收获，就点个赞吧
0 人点赞
