@文字印刷/rich-text

此模块包含帮助函数,用于将HTML或DOM树转换为富文本值并返回,以及使用类似于的函数修改该值字符串方法,加上一些用于格式化的附加方法。

安装

安装模块

npm安装@wordpress/rich-text

此包假定您的代码将在2015年欧洲标准+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持,您应该包括polyfill发货@wordpress/babel预设在代码中。

用法

富文本包旨在帮助操作纯文本字符串,以便它们能够表示复杂的格式。

通过使用RichTextValue格式value对象(从现在起称为价值)可以将文本与格式分开,从而提供轻松搜索和操作丰富格式的能力。

丰富格式的示例包括:

  • 粗体、斜体、上标(等)
  • 链接
  • 无序/有序列表

RichTextValue对象

值对象由以下内容组成:

  • 文本–要应用丰富格式的文本字符串。
  • 格式–长度与文本里面装满了格式(例如。核心/链接,核心/粗体等)。
  • 开始–中的索引文本代表开始当前活动选择的。
  • 结束–中的索引文本代表结束当前活动选择的。

你不应该试图创建自己的价值物体。相反,您应该依赖@文字印刷/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]}

选择

让我们继续考虑上面的示例和文本你好,世界.

如果作为用户,我选择了单词你好这将导致一个带有开始结束作为05分别。

通常,这对于了解选择了文本的哪一部分很有用。然而,我们需要考虑的是,选择也可能是“折叠”的。

折叠的选择

折叠的选择是指开始结束值为完全相同的(例如。开始:4,结束:4). 如果未选择任何字符,但存在插入符号,则会发生这种情况。当用户将光标/插入符号放在文本字符串中,但没有进行选择时,通常会发生这种情况。

假设选择没有“范围”(即开始结束索引),从折叠的值中查找当前选定的文本部分可能是一项挑战。

美国石油学会

应用程序格式

将格式对象应用于给定的RTF值启动索引到给定的endIndex(结束索引)。如果未提供索引,则从所选内容中检索索引。

参数

  • 价值 RichTextValue格式:要修改的值。
  • 格式 RichText格式:要应用的格式。
  • 启动索引 [编号]:开始索引。
  • endIndex(结束索引) [编号]:结束索引。

退换商品

  • RichTextValue格式:应用格式的新值。

凹面(concat)

将所有RTF值合并为一个。这类似于字符串.原型.concat.

参数

  • …RichTextValue:要合并的对象。

退换商品

  • RichTextValue格式:合并所有给定记录的新值。

创造

元素树(DOM)、HTML字符串或纯文本字符串,可以选择范围对象设置选择。如果在没有任何输入的情况下调用,将创建一个空值。可选功能可用于筛选内容。

值将具有以下形状,强烈建议您在不使用辅助函数的情况下不要修改该形状:

{text:string,格式:数组,替换:数组,?开始:数字,?结束:数字,}

如您所见,文本和格式是分开的。文本保存文本,包括对象和行的任何替换字符。格式,物体线都是长度相同的稀疏阵列文本。它保存有关相关文本索引格式的信息。最后开始结束说明选择了哪些文本索引。仅当范围给出了。

参数

  • $1 [对象]:可选的命名参数。
  • $1.元素 [元素]:要从中创建值的元素。
  • $1.text($1.text) [字符串]:要从中创建值的文本。
  • $1.html美元 [字符串]:HTML以创建价值。
  • $1.范围 [范围]:从中创建值的范围。
  • $1.__unstableIsEditableTree [布尔值]:

退换商品

  • RichTextValue格式:富文本值。

获取活动格式

在选择的开头按类型获取格式对象。这可以用于获取当前选择中链接格式的URL,也可以用于检查选择中的格式是否有效。如果所选内容没有格式,则返回未定义的。

参数

  • 价值 RichTextValue格式:要检查的值。
  • formatType格式类型 一串:要查找的格式类型。

退换商品

  • RichTextFormat|未定义:指定类型或未定义的活动格式对象。

获取活动格式

获取选择开始处的所有格式对象。

参数

  • 价值 RichTextValue格式:要检查的值。
  • 空_活动_窗体 阵列:如果没有活动格式,则返回数组。

退换商品

  • RichTextFormatList格式列表:活动格式对象。

获取活动对象

获取活动对象(如果有)。

参数

  • 价值 RichTextValue格式:要检查的值。

退换商品

  • RichTextFormat |无效:活动对象,或未定义。

获取文本内容

获取RTF值的文本内容。这类似于元素文本内容.

参数

  • 价值 RichTextValue格式:要使用的值。

退换商品

  • 一串:文本内容。

插入

在给定的RTF值中插入RTF值、HTML字符串或纯文本字符串启动索引.任何介于启动索引endIndex(结束索引)将被删除。如果未提供索引,则从选择中检索索引。

参数

  • 价值 RichTextValue格式:要修改的值。
  • 要插入的值 RichTextValue|string:要插入的值。
  • 启动索引 [编号]:开始索引。
  • 结束索引 [编号]:结束索引。

退换商品

  • RichTextValue格式:插入值的新值。

插入对象

将格式作为对象插入到给定的RTF值中启动索引.任何介于启动索引endIndex(结束索引)将被删除。如果没有提供索引,则从所选内容中检索索引。

参数

  • 价值 RichTextValue格式:要修改的值。
  • 要插入的格式 RichTextFormat格式:要作为对象插入的格式。
  • 启动索引 [编号]:开始索引。
  • endIndex(结束索引) [编号]:结束索引。

退换商品

  • RichTextValue格式:插入对象的新值。

已折叠

检查RTF值的选择是否折叠。折叠表示未选择任何字符,但存在插入符号。如果没有选择,未定义将返回。这类似于window.getSelection().isCollapsed().

参数

  • 道具 RichTextValue格式:要检查的RTF值。
  • 道具.启动 RichTextValue[“开始”]:
  • 道具.end RichTextValue[“结束”]:

退换商品

  • 布尔|未定义:如果选择是折叠的,则为True;如果不是,则为false;如果没有选择,则为undefined。

栈空

检查富文本值是否为空,这意味着它不包含文本或任何对象(例如图像)。

参数

  • 价值 RichTextValue格式:要使用的值。

退换商品

  • 布尔值:如果值为空,则为True,否则为false。

参加

将一组RTF值组合成一个数组,可以选择用分离器,可以是RTF值、HTML字符串或纯文本字符串。这类似于数组.prototype.join.

参数

  • 数组<RichTextValue>:要联接的值数组。
  • 分离器 [string|RichTextValue]:分隔符字符串或值。

退换商品

  • RichTextValue格式:新的组合值。

寄存器格式类型

注册一个新的格式,提供一个唯一的名称和一个定义其行为的对象。

参数

  • 名称 一串:格式名称。
  • 设置 WP格式:格式设置。

退换商品

  • WPFormat|未定义:格式,如果已成功注册;否则未定义.

去除

从给定值之间的RTF值中删除内容启动索引endIndex(结束索引)。如果没有提供索引,则从选择中检索索引。

参数

  • 价值 RichTextValue格式:要修改的值。
  • 启动索引 [编号]:开始索引。
  • endIndex(结束索引) [编号]:结束索引。

退换商品

  • RichTextValue格式:删除了内容的新值。

删除格式

从给定的启动索引到给定的endIndex(结束索引)。如果未提供索引,则从所选内容中检索索引。

参数

  • 价值 RichTextValue格式:要修改的值。
  • formatType格式类型 一串:要删除的格式类型。
  • 启动索引 [编号]:开始索引。
  • endIndex(结束索引) [编号]:结束索引。

退换商品

  • RichTextValue格式:应用格式的新值。

代替

搜索RTF值并将匹配项替换为更换。这类似于字符串.原型.替换.

参数

  • 价值 RichTextValue格式:要修改的值。
  • 图案 RegExp |字符串:RegExp对象或文字。也可以是字符串。它被视为逐字字符串,不被解释为正则表达式。仅替换第一个匹配项。
  • 更换 函数|string:匹配项将替换为指定的或指定函数返回的值。

退换商品

  • RichTextValue格式:应用替换的新值。

Rich文本数据

RichTextData类用于实例化富文本值的包装器,其方法可用于转换或操作数据。

  • 创建空实例:新建RichTextData().
  • 从HTML字符串创建一个:来自HTMLString的RichTextData(
    “你好”)
    .
  • 从包装器HTMLElement创建一个:来自HTMLElement的RichTextData(
    document.querySelector(“p”)
    .
  • 从纯文本创建一个:RichTextData.fromPlainText(“1\n2”).
  • 从RTF值创建一个:新建RichTextData({text:“…”,
    格式:[…]})
    .

RichTextValue格式

表示格式化字符串的对象。请参阅main@文字印刷/rich-text文档以获取更多信息。

从中分割富文本值启动索引endIndex(结束索引)。如果未提供索引,则从所选内容中检索索引。这类似于字符串.原型.片.

参数

  • 价值 RichTextValue格式:要修改的值。
  • 启动索引 [编号]:开始索引。
  • endIndex(结束索引) [编号]:结束索引。

退换商品

  • Rich文本值:新提取值。

分裂

在给定的启动索引endIndex(结束索引),或在给定分隔符处拆分。这类似于字符串.原型.拆分。如果未提供索引,则从所选内容中检索索引。

参数

  • 价值 RichTextValue格式:
  • 一串 [number|string]:开始索引,或要拆分的字符串。

退换商品

  • 数组<RichTextValue>|未定义:新值的数组。

商店

存储rich-text命名空间的定义。

相关的

类型

  • 对象

切换格式

在当前选择中将格式对象切换为RTF值。

参数

  • 价值 RichTextValue格式:要修改的值。
  • 格式 RichTextFormat格式:要应用或删除的格式。

退换商品

  • RichTextValue格式:应用或删除格式的新值。

到HTML字符串

从RTF值创建HTML字符串。

参数

  • $1 对象:命名目标。
  • 价值$1 Rich文本值:RTF值。
  • $1.保留空白 [布尔值]:如果为true,则保留换行。

退换商品

  • 一串:HTML字符串。

取消注册格式类型

注销格式。

参数

  • 名称 一串:格式名称。

退换商品

  • 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(文字出版社)以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息,请阅读该项目的主要内容投稿人指南.