如何在保持当前内联样式的同时以编程方式将文本插入 draft js 富文本字段？

Question

当我点击带有特定符号的按钮时，我希望它将该符号放在文本字段中。

为此，我使用了一个文本插入函数：

insertText(characterToInsert) {
    let editorState = this.state.editorState;

    const currentContent = editorState.getCurrentContent(),
        currentSelection = editorState.getSelection();

    let newContent = Modifier.replaceText(
        currentContent,
        currentSelection,
        characterToInsert
    );

    return EditorState.push(editorState, newContent, 'insert-characters');
}

我希望它在打开下标内联样式时在此处放置下标文本。

我尝试做类似

的事情

if (this.isSubscriptOn()) {
    newContent = Modifier.applyInlineStyle(newContent, currentSelection, 'SUBSCRIPT');
}

但是，我不知道如何更改第二个参数，以便选择针对新放置的字符。

有没有更好的方法来解决这个问题？

Answer 1

第一步是使用静态Modifierclass的applyInlineStyle: function (contentState: ContentState, selectionState: SelectionState, inlineStyle: string)函数。如您所见 - 它需要选择我们希望应用样式的区域。我们将使用来自 immutable.js:

的 set 方法创建这样的样式

const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);

然后我们将获取当前内联样式的 OrderedSet 并将它们中的每一个应用于上述选择：

let inlineStyles = editorState.getCurrentInlineStyle();
inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));

如果我们就停在这里，文本将在被选中时被放入输入字段（它周围会出现蓝色矩形）。为了避免这种行为，让我们强制选择到插入文本的末尾：

newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));

整个函数如下所示：

insertText(textToInsert) {
    let editorState = this.state.editorState;

    const currentContent = editorState.getCurrentContent();
    const currentSelection = editorState.getSelection();

    let newContent = Modifier.replaceText(
        currentContent,
        currentSelection,
        textToInsert
    );

    const textToInsertSelection = currentSelection.set('focusOffset', currentSelection.getFocusOffset() + textToInsert.length);

    let inlineStyles = editorState.getCurrentInlineStyle();

    inlineStyles.forEach(inLineStyle => newContent = Modifier.applyInlineStyle(newContent, textToInsertSelection, inLineStyle));

    let newState = EditorState.push(editorState, newContent, 'insert-characters');
    newState = EditorState.forceSelection(newState, textToInsertSelection.set('anchorOffset', textToInsertSelection.getAnchorOffset() + textToInsert.length));

    return newState;
}

如何在保持当前内联样式的同时以编程方式将文本插入 draft js 富文本字段？

How to insert text programmaticaly into draft js rich text field while maintaining the current inline style?

javascript

reactjs

draftjs