向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"));
}

我现在正在尝试使用这个例子创建一个block of type 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, ' '));
}

我似乎无法找到任何在编辑器中随处插入自定义HTML的示例。有人能指出我正确的方向吗？谢谢！

Answer 1

您将无法插入HTML。要插入<hr />，您需要将当前块拆分为两个并插入插入原子块之间。创建自定义类型的块，以便您可以将该类型呈现为可以呈现<hr />的自定义组件。