React Draft Wysiwyg 将粗体、斜体或 udenderlina 应用于整个内容

Question

我需要将粗体、斜体、下划线样式应用于编辑器的整个内容，而不是选定的文本，例如对齐样式，但我找不到方法。是否可以更改操作或处理程序？

Answer 1

是的，这是可能的。您可以在应用样式时更新 SelectionState。在这里，我们选择所有文本

const selection = editorState.getSelection().merge({
  anchorKey: currentContent.getFirstBlock().getKey(),
  anchorOffset: 0,
  focusOffset: currentContent.getLastBlock().getText().length,
  focusKey: currentContent.getLastBlock().getKey()
});

然后，我们应用新的 selection

const editorStateWithAllSelection = EditorState.acceptSelection(
  editorState,
  selection
);

const newState = RichUtils.toggleInlineStyle(
  editorStateWithAllSelection,
  inlineStyle
)

如果您想避免在最终结果中选择您的文本，我们可以应用我们的旧选择

const selectionBefore = editorState.getSelection();

// updating selection, toggling style ...

const editorStateWithSelectionBefore = EditorState.acceptSelection(
  newState,
  selectionBefore
);

setEditorState(editorStateWithSelectionBefore);

示例 Codeandbox

React Draft Wysiwyg 将粗体、斜体或 udenderlina 应用于整个内容

React Draft Wysiwyg apply bold, italic or udenderlina to whole content

wysiwyg

reactjs

draftjs