javascript - 向 React Draft Wysiwyg 添加水平规则按钮

Question

我正在尝试向React Draft Wysiwyg添加一个自定义按钮，以便在我的内容 中插入一个<hr>标签。

使用演示和文档，我设法让自定义按钮插入文本而不是标记。

onClick = () => {
  const { editorState, onChange } = this.props;
  const contentState = Modifier.replaceText(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    "this is just text <hr />",
    editorState.getCurrentInlineStyle(),
  );
onChange(EditorState.push(editorState, contentState, "insert-characters"));
}

我现在正在尝试使用此示例创建一个Atomic 类型的块，但我不知道如何更改<hr>元素的图像。

insertImage = () => {
    const { editorState, onChange } = this.props;
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
        'image',
        'IMMUTABLE',
        { src: 'http://www.image.png' },
    )
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
    const newEditorState = EditorState.set(
        editorState,
        { currentContent: contentStateWithEntity },
    )
    onChange( AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
}

我似乎无法在任何地方找到将自定义 HTLM 插入编辑器的任何示例。有人可以指出我正确的方向吗？谢谢！

Answer 1

您将无法插入 HTML。要插入<hr />，您需要将当前块一分为二，并在插入原子块之间。使该块成为您的自定义类型，以便您可以将该类型呈现为可以呈现的自定义组件<hr />。