此模块包含帮助函数,用于将HTML或DOM树转换为富文本值并返回,以及使用类似于的函数修改该值字符串
方法,加上一些用于格式化的附加方法。
安装模块
npm安装@wordpress/rich-text
此包假定您的代码将在2015年欧洲标准+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持,您应该包括polyfill发货@wordpress/babel预设
在代码中。
富文本包旨在帮助操作纯文本字符串,以便它们能够表示复杂的格式。
通过使用RichTextValue格式
value对象(从现在起称为价值
)可以将文本与格式分开,从而提供轻松搜索和操作丰富格式的能力。
丰富格式的示例包括:
值对象由以下内容组成:
文本
–要应用丰富格式的文本字符串。
格式
–长度与文本
里面装满了格式(例如。核心/链接
,核心/粗体
等)。
开始
–中的索引文本
代表开始当前活动选择的。
结束
–中的索引文本
代表结束当前活动选择的。
你不应该试图创建自己的价值
物体。相反,您应该依赖@文字印刷/rich-text
包为您构建这些。
理解值如何表示格式丰富的文本非常重要。下面是一个示例。
如果文本
以粗体从位置2-5开始格式化(核心/粗体
)从位置2-8开始,带有一个链接(核心/链接
),然后您会发现:
- 在位置2-5处的稀疏阵列内的阵列,其包括
核心/粗体
格式
- 稀疏数组中位置2-8处的数组,其中包括
核心/链接
格式
这看起来是这样的:
{text:“Hello world”,//长度11格式:[[], // 0[],[ // 2{type:'core/bold',},{type:'核心/链接',}],[{type:'core/bold',},{type:'核心/链接',}],[{type:'core/bold',},{type:'核心/链接',}],[{type:'core/bold',},{type:'核心/链接',}],[ // 6{type:'核心/链接',}][{type:'核心/链接',}],[{type:'核心/链接',}],[], // 9[], // 10[], // 11]}
让我们继续考虑上面的示例和文本你好,世界
.
如果作为用户,我选择了单词你好
这将导致一个带有开始
和结束
作为0
和5
分别。
通常,这对于了解选择了文本的哪一部分很有用。然而,我们需要考虑的是,选择也可能是“折叠”的。
折叠的选择
折叠的选择是指开始
和结束
值为完全相同的(例如。开始:4,结束:4
). 如果未选择任何字符,但存在插入符号,则会发生这种情况。当用户将光标/插入符号放在文本字符串中,但没有进行选择时,通常会发生这种情况。
假设选择没有“范围”(即开始
和结束
索引),从折叠的值中查找当前选定的文本部分可能是一项挑战。
将格式对象应用于给定的RTF值启动索引
到给定的endIndex(结束索引)
。如果未提供索引,则从所选内容中检索索引。
参数
- 价值
RichTextValue格式
:要修改的值。
- 格式
RichText格式
:要应用的格式。
- 启动索引
[编号]
:开始索引。
- endIndex(结束索引)
[编号]
:结束索引。
退换商品
将所有RTF值合并为一个。这类似于字符串.原型.concat
.
参数
退换商品
RichTextValue格式
:合并所有给定记录的新值。
从元素
树(DOM)、HTML字符串或纯文本字符串,可以选择范围
对象设置选择。如果在没有任何输入的情况下调用,将创建一个空值。可选功能可用于筛选内容。
值将具有以下形状,强烈建议您在不使用辅助函数的情况下不要修改该形状:
{text:string,格式:数组,替换:数组,?开始:数字,?结束:数字,}
如您所见,文本和格式是分开的。文本
保存文本,包括对象和行的任何替换字符。格式
,物体
和线
都是长度相同的稀疏阵列文本
。它保存有关相关文本索引格式的信息。最后开始
和结束
说明选择了哪些文本索引。仅当范围
给出了。
参数
- $1
[对象]
:可选的命名参数。
- $1.元素
[元素]
:要从中创建值的元素。
- $1.text($1.text)
[字符串]
:要从中创建值的文本。
- $1.html美元
[字符串]
:HTML以创建价值。
- $1.范围
[范围]
:从中创建值的范围。
- $1.__unstableIsEditableTree
[布尔值]
:
退换商品
在选择的开头按类型获取格式对象。这可以用于获取当前选择中链接格式的URL,也可以用于检查选择中的格式是否有效。如果所选内容没有格式,则返回未定义的。
参数
- 价值
RichTextValue格式
:要检查的值。
- formatType格式类型
一串
:要查找的格式类型。
退换商品
RichTextFormat|未定义
:指定类型或未定义的活动格式对象。
获取选择开始处的所有格式对象。
参数
- 价值
RichTextValue格式
:要检查的值。
- 空_活动_窗体
阵列
:如果没有活动格式,则返回数组。
退换商品
RichTextFormatList格式列表
:活动格式对象。
获取活动对象(如果有)。
参数
- 价值
RichTextValue格式
:要检查的值。
退换商品
RichTextFormat |无效
:活动对象,或未定义。
获取RTF值的文本内容。这类似于元素文本内容
.
参数
- 价值
RichTextValue格式
:要使用的值。
退换商品
在给定的RTF值中插入RTF值、HTML字符串或纯文本字符串启动索引
.任何介于启动索引
和endIndex(结束索引)
将被删除。如果未提供索引,则从选择中检索索引。
参数
- 价值
RichTextValue格式
:要修改的值。
- 要插入的值
RichTextValue|string
:要插入的值。
- 启动索引
[编号]
:开始索引。
- 结束索引
[编号]
:结束索引。
退换商品
将格式作为对象插入到给定的RTF值中启动索引
.任何介于启动索引
和endIndex(结束索引)
将被删除。如果没有提供索引,则从所选内容中检索索引。
参数
- 价值
RichTextValue格式
:要修改的值。
- 要插入的格式
RichTextFormat格式
:要作为对象插入的格式。
- 启动索引
[编号]
:开始索引。
- endIndex(结束索引)
[编号]
:结束索引。
退换商品
检查RTF值的选择是否折叠。折叠表示未选择任何字符,但存在插入符号。如果没有选择,未定义
将返回。这类似于window.getSelection().isCollapsed()
.
参数
- 道具
RichTextValue格式
:要检查的RTF值。
- 道具.启动
RichTextValue[“开始”]
:
- 道具.end
RichTextValue[“结束”]
:
退换商品
布尔|未定义
:如果选择是折叠的,则为True;如果不是,则为false;如果没有选择,则为undefined。
检查富文本值是否为空,这意味着它不包含文本或任何对象(例如图像)。
参数
- 价值
RichTextValue格式
:要使用的值。
退换商品
布尔值
:如果值为空,则为True,否则为false。
将一组RTF值组合成一个数组,可以选择用分离器
,可以是RTF值、HTML字符串或纯文本字符串。这类似于数组.prototype.join
.
参数
- 值
数组<RichTextValue>
:要联接的值数组。
- 分离器
[string|RichTextValue]
:分隔符字符串或值。
退换商品
注册一个新的格式,提供一个唯一的名称和一个定义其行为的对象。
参数
- 名称
一串
:格式名称。
- 设置
WP格式
:格式设置。
退换商品
WPFormat|未定义
:格式,如果已成功注册;否则未定义
.
从给定值之间的RTF值中删除内容启动索引
和endIndex(结束索引)
。如果没有提供索引,则从选择中检索索引。
参数
- 价值
RichTextValue格式
:要修改的值。
- 启动索引
[编号]
:开始索引。
- endIndex(结束索引)
[编号]
:结束索引。
退换商品
RichTextValue格式
:删除了内容的新值。
从给定的启动索引
到给定的endIndex(结束索引)
。如果未提供索引,则从所选内容中检索索引。
参数
- 价值
RichTextValue格式
:要修改的值。
- formatType格式类型
一串
:要删除的格式类型。
- 启动索引
[编号]
:开始索引。
- endIndex(结束索引)
[编号]
:结束索引。
退换商品
搜索RTF值并将匹配项替换为更换
。这类似于字符串.原型.替换
.
参数
- 价值
RichTextValue格式
:要修改的值。
- 图案
RegExp |字符串
:RegExp对象或文字。也可以是字符串。它被视为逐字字符串,不被解释为正则表达式。仅替换第一个匹配项。
- 更换
函数|string
:匹配项将替换为指定的或指定函数返回的值。
退换商品
RichTextData类用于实例化富文本值的包装器,其方法可用于转换或操作数据。
- 创建空实例:
新建RichTextData()
.
- 从HTML字符串创建一个:
来自HTMLString的RichTextData(
“你好”)
.
- 从包装器HTMLElement创建一个:
来自HTMLElement的RichTextData(
document.querySelector(“p”)
.
- 从纯文本创建一个:
RichTextData.fromPlainText(“1\n2”)
.
- 从RTF值创建一个:
新建RichTextData({text:“…”,
格式:[…]})
.
表示格式化字符串的对象。请参阅main@文字印刷/rich-text
文档以获取更多信息。
从中分割富文本值启动索引
到endIndex(结束索引)
。如果未提供索引,则从所选内容中检索索引。这类似于字符串.原型.片
.
参数
- 价值
RichTextValue格式
:要修改的值。
- 启动索引
[编号]
:开始索引。
- endIndex(结束索引)
[编号]
:结束索引。
退换商品
在给定的启动索引
和endIndex(结束索引)
,或在给定分隔符处拆分。这类似于字符串.原型.拆分
。如果未提供索引,则从所选内容中检索索引。
参数
- 价值
RichTextValue格式
:
- 一串
[number|string]
:开始索引,或要拆分的字符串。
退换商品
数组<RichTextValue>|未定义
:新值的数组。
存储rich-text命名空间的定义。
相关的
类型
在当前选择中将格式对象切换为RTF值。
参数
- 价值
RichTextValue格式
:要修改的值。
- 格式
RichTextFormat格式
:要应用或删除的格式。
退换商品
RichTextValue格式
:应用或删除格式的新值。
从RTF值创建HTML字符串。
参数
- $1
对象
:命名目标。
- 价值$1
Rich文本值
:RTF值。
- $1.保留空白
[布尔值]
:如果为true,则保留换行。
退换商品
注销格式。
参数
退换商品
WPFormat|未定义
:如果已成功注销,则为以前的格式值;否则未定义
.
这个钩子将在格式类型的Edit组件中使用,它返回已格式化的活动元素,如果没有活动的格式,则返回选择范围的虚拟元素。返回的值用于定位UI,例如通过将其传递给波波(Popover)
组件,通过锚
道具。
参数
- $1
对象
:命名参数。
- $1.editableContentElement($1.editable内容元素)
HTMLElement |空
:包含可编辑内容的元素。
- $1.设置
WP格式=
:格式类型的设置。
退换商品
元素|VirtualAnchorElement |未定义| null
:激活元素或选择范围。
此钩子用于格式类型的Edit组件,返回已格式化的活动元素,如果没有活动的格式,则返回选择范围。返回的值用于定位UI,例如通过将其传递给波波(Popover)
组件。
参数
- $1
对象
:命名参数。
- 1.ref美元
参考对象<HTMLElement>
:包含可编辑内容的元素的React ref。
- 价值$1
RichTextValue格式
:要检查选择的值。
- $1.设置
WP格式
:格式类型的设置。
退换商品
这是古腾堡项目的一部分。该项目组织为单回购。它由多个独立的软件包组成,每个包都有特定的用途。此monorepo中的包发布到净现值法并由使用WordPress(文字出版社)以及其他软件项目。
要了解更多关于对这个包或古腾堡整体贡献的信息,请阅读该项目的主要内容投稿人指南.