DraftJs：使用实体键替换实体

编程问答 2022-08-16

问题描述

我正在使用draftjs创建一个RTF编辑器，找不到任何资源来帮助我解决问题。

请首先查看codesandbox。

您可以看到包含链接的文本（红色的testtest）。如果单击它，您将在表中看到该链接的一些信息：

| ? link src         | http://localhost:8080/testtest |
| ? link text        | testtest                       |
| ? link Entity key  | ab5a7c6d...                    |

由于我的getCurrentLinkKey助手，我得到了当前的链接钥匙（?）：

const getCurrentLinkKey = (
  editorState: EditorState,contentState?: ContentState
): string => {
  if (contentState === undefined) {
    contentState = editorState.getCurrentContent();
  }

  const startKey = editorState.getSelection().getStartKey();
  const startOffset = editorState.getSelection().getStartOffset();
  const blockWithLinkAtBeginning = contentState.getBlockForKey(startKey);

  return blockWithLinkAtBeginning.getEntityAt(startOffset);
};

然后使用此键，我可以使用Entity助手获得链接getCurrentLinkEntity：

const getCurrentLinkEntity = (
  editorState: EditorState
): EntityInstance | null => {
  const contentState = editorState.getCurrentContent();
  const linkKey = getCurrentLinkKey(editorState,contentState);

  if (linkKey) {
    return contentState.getEntity(linkKey);
  }

  return null;
};

使用链接Entity，我终于可以得到src和text的值：

getCurrentLinkEntity(editorState).getData().url   // ?
getCurrentLinkEntity(editorState).getData().text  // ?

您可以在底部看到一个按钮Insert link。如果您选择整个链接testtest，然后单击此按钮，则该链接将被替换。

此功能由insertLink助手处理：

const insertLink = (
  link: string,text: string,editorState: EditorState,setEditorState: (editorState: EditorState) => void
): void => {
  const contentStateWithEntity = editorState
    .getCurrentContent()
    .createEntity("LINK","MUTABLE",{ url: link,text });

  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

  const contentState = Modifier.replaceText(
    editorState.getCurrentContent(),editorState.getSelection(),text,editorState.getCurrentInlinestyle(),entityKey
  );

  const newEditorState = EditorState.set(editorState,{
    currentContent: contentStateWithEntity
  });
  const newEditorStateWithLink = RichUtils.toggleLink(
    newEditorState,newEditorState.getSelection(),entityKey
  );

  setEditorState(
    EditorState.push(newEditorStateWithLink,contentState,"insert-characters")
  );
};

但是此功能只会通过Google链接替换您选择的文本。我想要的是，如果您在链接上并单击该按钮，则应该更新整个链接。所以我创造了 replaceLink助手：

const replaceLink = (
  link: string,text });

  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

  const newEditorState = EditorState.set(editorState,{
    currentContent: contentStateWithEntity
  });

  const contentState = newEditorState
    .getCurrentContent()
    .replaceEntityData(getCurrentLinkKey(editorState),{ entityKey });

  const newEditorStateWithLink = RichUtils.toggleLink(
    newEditorState,"insert-characters")
  );
};

但是可悲的是，如果我单击Replace link按钮（触发replaceLink助手），则链接未更新，但src和text为空：> 

| ? link src         |             |
| ? link text        |             |
| ? link Entity key  | a1e34047... |

所以作为一个人，我知道如何使用它的实体密钥替换链接Entity？

解决方法

好吧，我给出的答案是使用draftjs-utils包并替换链接但不使用其实体密钥：

此<div>TEST</div>助手是受react-draft-wysiwyg库中的工作启发而来的：

replaceLink

检查codesandbox使其实时显示。

draftjsjavascriptreactjsreactjstypescripttypescript