Draftjs中文翻译4- 实体

最新推荐文章于 2024-08-10 08:30:18 发布

JYX8

最新推荐文章于 2024-08-10 08:30:18 发布

阅读量1.2k

点赞数

分类专栏： draftjs javascript react-js 文章标签： draftjs

javascript 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

react-js

7 篇文章 0 订阅

订阅专栏

draftjs

4 篇文章 0 订阅

订阅专栏

Draftjs中的实体用于存储文本元数据，包括类型、可变性和数据属性。不可变实体在编辑时不能更改，常用于提及等；可变和分段实体允许编辑。创建实体通过contentState.createEntity，并使用ContentBlock的getEntityAt检索。实体的可变性决定了在编辑时的行为，如链接通常是可变的。修改实体需使用mergeData或replaceData方法。装饰器可用于检索实体并实现丰富内容的渲染。

摘要由CSDN通过智能技术生成

介绍

实体是表示草稿编辑器中的一系列文本的元数据的对象。它有三个属性：

类型：这表明它是什么样的实体的字符串，例如’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();