reactjs - 工具栏draftjs编辑器中的自定义按钮

Question

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

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

有人能给我指出正确的方向(或文档)吗？

Answer 1

这是我如何尝试的，纯粹的 react Hook 方式来实现目标，

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%;
}