介绍
实体是表示草稿编辑器中的一系列文本的元数据的对象。它有三个属性:
类型:这表明它是什么样的实体的字符串,例如’LINK’, ‘MENTION’,’PHOTO’。
可变性:不要与la不可变性混淆immutable-js,这个属性表示在编辑器中编辑文本范围时,用这个实体对象注解的一系列文本的行为。这在下面更详细地解决。
数据:包含实体元数据的可选对象。例如,一个’LINK’实体可能包含一个data包含该href链接值的对象。
所有实体都存储在ContentState记录中。这些实体由内部的键引用ContentState,React组件用于修饰注释范围。
使用装饰器或 自定义块组件,您可以根据实体元数据向编辑器添加丰富的渲染。
创建和检索实体
应该使用contentState.createEntity接受上述三个属性作为参数的实体来创建实体。此方法返回一个ContentState更新的记录以包含新创建的实体,然后您可以调用contentState.getLastCreatedEntityKey以获取新创建的实体记录的密钥。
此键是将实体应用于内容时应使用的值。例如,该Modifier模块包含一个applyEntity方法:
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
'LINK',
'MUTABLE',
{url: 'http://www.zombo.com'}
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const contentStateWithLink = Modifier.applyEntity(
contentStateWithEntity,
selectionState,
entityKey
);
然后,对于给定的文本范围,可以通过在对象getEntityAt()上使用方法来提取其关联的实体关键字ContentBlock,从而传递目标偏移值。
const blockWithLinkAtBeginning = contentState.getBlockForKey('...');
const linkKey = blockWithLinkAtBeginning.getEntityAt(0);
const contentState = editorState.getCurrentContent();
const linkInstance = contentState.getEntity(linkKey);
const {url} = linkInstance.getData();
“可变性”
实体可能具有三个“可变性”值之一。它们之间的区别在于用户对它们进行编辑时的行为方式。
请注意,DraftEntityInstance对象始终是不可变的记录,此属性仅用于指示注释文本在编辑器中如何“突变”。(将来的更改可能会重命名此属性以避免命名周围的潜在混淆。)
不可变
如果不从文本中移除实体注释,则不能更改此文本。这种可变性类型的实体是有效的原子。
例如,在Facebook的输入中,为页面添加提及(即Barack Obama)。然后,在提到的文本中添加一个字符,或尝试删除一个字符。请注意,添加字符时,实体将被删除,删除字符时,整个实体将被删除。
这种可变性值在文本绝对必须与其相关元数据匹配并且不可更改的情况下非常有用。
易变的
本文可能会随意更改。例如,链接文本通常意图是“可变的”,因为href和链接的文本没有紧密耦合。
分段
“分割”的实体与“不可变”实体的方式非常相似,但允许通过删除进行自定义。
例如,在Facebook输入中,为朋友添加提及。然后,向文本添加一个字符。请注意,实体将从整个字符串中删除,因为您提到的朋友可能没有在您的文本中更改其名称。
接下来,尝试删除提及中的字符或单词。请注意,只有您提及的部分被删除。通过这种方式,我们可以允许短名称提及。
修改实体
由于DraftEntityInstance记录是不可变的,因此您不能data 直接更新实例的属性。
相反,有两种Entity方法可用于修改实体:mergeData和 replaceData。前者允许通过传入要合并的对象来更新数据,而后者则完全交换新数据对象。
使用实体获取丰富的内容
本节中的下一篇文章将介绍装饰器对象的用法,可用于检索用于呈现目的的实体。
该链接器例如 提供实体的创建和装修使用的工作示例。
原文链接:https://draftjs.org/docs/advanced-topics-entities.html#content
各种翻译工具齐上,如有问题,请指正!