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

Question

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

我有一个只有粗斜体和列表按钮的编辑器，我想添加一个显示弹出窗口的按钮，我可以在其中 select 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%;
}

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

Custom button in toolbar draftjs editor

reactjs

draftjs

react-hooks