javascript DraftJs:用于将特定html元素添加到编辑器的自定义工具栏按钮

kb5ga3dv  于 2022-12-02  发布在  Java
关注(0)|答案(1)|浏览(208)

我正在特灵创建一个自定义的富文本编辑器。
如何将带有自定义函数的自定义工具栏按钮添加到draftjs + react-draft-wysiwyg编辑器中?

当用户点击自定义按钮时,文本光标所在的编辑器中应出现一个弹出窗口,该弹出窗口包含特定列表。

当用户单击其中一个列表项时,它应该作为特定节点添加到编辑器中。

我试过用很多文本编辑器来实现这个功能。但是我做不到。即使是这个小的尝试也不能像预期的那样工作

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();
  };

程式码沙箱:https://codesandbox.io/s/custom-rich-text-editor-7xw7qp

uurity8g

uurity8g1#

请参考下面的链接。我已经派生了您的代码并实现了一个解决方案。DraftJS Custom Toolbar and Mentions

相关问题