工具栏 Draftjs 编辑器中的自定义按钮

Question

如何将带有自定义功能的按钮添加到 Draftjs 编辑器？我觉得这应该很简单，但我找不到示例或文档。

我有一个只有粗斜体和列表按钮的编辑器，我想添加一个显示弹出窗口的按钮，我可以在其中选择 3 个选项中的 1 个，然后在编辑器中“注入”它。

有人能指出我正确的方向（或文档）吗？

Answer 1

这里我是如何尝试这个的，纯粹是反应钩子的方式来实现目标，

App.js 文件

import MyEditor from './Component/MyEditor';

function App() {
   <MyEditor />
}

MyEditor.js 文件导出 App.js 中使用和导入的 MyEditor 组件

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import './MyEditor.css'

export default function MyEditor() {
  
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );


  const _onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }  

  return(
    <div>
        <button onClick={_onBoldClick}>BOLD</button>
        <div
        >
          <Editor 
            textAlignment="left" placeholder="Enter something here" 
            editorState={editorState} onChange={setEditorState} />
        </div>
        
    </div>
  ) 
  
    
}

//ReactDOM.render(<MyEditor />, document.getElementById('container'));

用于样式的css文件

div.DraftEditor-root {
    border: 1px solid black;
    
    height: 200px;
    width: 200px;
    margin-left: 20%;

    overflow-y: auto;
}

div.DraftEditor-editorContainer, div.public-DraftEditor-content {
    height: 100%;
}