Question

我正在使用draftjs编辑器。我有一个装饰器，可以通过正则表达式检测一些文本并生成自制组件。这是调用API并通过用API的结果替换初始文本来返回结果。

我想将此结果作为不可破坏，不可编辑的实体，而且我不知道该怎么做。

这是我用来替换值的函数

/**
   * Replace text in editor
   *
   * @param {Object} editorState  - State of the editor
   * @param {string} search       - Search value
   * @param {string} replaceValue - replacement value
   *
   * @returns {Object} Returns the new editorState with link removed
   */
  static replace(editorState, search, replaceValue) {

    if (typeof search === 'undefined' || search === null) {
      return editorState;
    }

    const regex = new RegExp(escapeStringRegexp(search), 'g');
    const blockMap = editorState.getCurrentContent().getBlockMap();
    const selectionsToReplace = [];
    blockMap.forEach((contentBlock) => (
      findWithRegex(regex, contentBlock, (start, end) => {
        const blockKey = contentBlock.getKey();
        const blockSelection = SelectionState
          .createEmpty(blockKey)
          .merge({
            anchorOffset: start,
            focusOffset: end,
          });

        selectionsToReplace.push(blockSelection)
      })
    ));

    let contentState = editorState.getCurrentContent();

    selectionsToReplace.forEach(selectionState => {
      contentState = Modifier.replaceText(contentState, selectionState, replaceValue)
    });

    return draftEditorState.push(editorState, contentState);
  }

我想要的是结果可以作为全局部分移动或删除，并且不能更改。

感谢您的帮助。

Answer 1

我认为您正在寻找的是Draftjs'entities。假设如果您将实体与IMMUTABLE一起使用，则该实体将被视为不可编辑，并且如果您尝试删除部分单词，则会将整个单词删除。

这里是官方draftjs example using entities，但使用带预标记的句段。我认为在您的情况下，就像在findWithRegex内做这样的事情一样简单（还没有测试过，所以这可能会很遥远-只是试图使想法得以传播）：

let newContentState = editorState.getCurrentContent();

findWithRegex(regex, contentBlock, (start, end) => {
  const blockKey = contentBlock.getKey();
  const blockSelection = SelectionState
    .createEmpty(blockKey)
    .set("anchorOffset", start)
    .set("focusOffset", end);

  const searchEntity = content.createEntity(
    "SEARCH", // type
    "MUTABLE", // mutability <--
  );
  const entityKey = content.getLastCreatedEntityKey();

  newContentState = Modifier.applyEntity(searchEntity, blockSelection, entityKey);
})

return EditorState.push(editorState, newContentState, "apply-search-styling");

有没有办法在牢不可破的draftjs中添加实体？

1 个答案: