DraftJs：自定义工具栏按钮，用于将特定的 html 元素添加到编辑器答案

【问题标题】：DraftJs : Custom toolbar button to add a specific html element to editorDraftJs：自定义工具栏按钮，用于将特定的 html 元素添加到编辑器
【发布时间】：2022-12-02 05:46:39
【问题描述】：

I\'m tring to create a customized Rich text editor.

How can I add a custom toolbar button with a custom function behind it to the draftjs + react-draft-wysiwyg editor?

When user click on the custom button, a popup should appear in the editor where the text cursor is located and the popup contains a certain list.

When the user clicks on one of the list items, it should be added to the editor as a particular node.

I have tried with many text editors to implement this functionality. But I couldn\'t. Even this small trying deosn\'t work as expected

sendTextToEditor = (text) => {
    const sampleMarkup =
      \"<div>Bold text</b>, <i>Italic text</i><br/ ></div>\" +
      \'<a href=\"http://www.facebook.com\">Example link</a>\';

    const blocksFromHTML = convertFromHTML(sampleMarkup);
    const state = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    );

    this.setState({
      editorState: EditorState.createWithContent(state)
    });

    this.focusEditor();
  };

CodeSandbox: https://codesandbox.io/s/custom-rich-text-editor-7xw7qp

标签： javascript reactjs typescript draftjs react-draft-wysiwyg

【解决方案1】：