Custom button in toolbar draftjs editor

user_10748569 0
Viewed 1643

How can I add a button with a custom function behind it to the draftjs editor? I have the feeling this should be pretty straightforward but I can't find examples or documentation.

I have an Editor with only bold italic and list buttons and I want to add a button that shows a popup where I can select 1 of 3 options and then "inject" this in the editor.

Can someone point me in the right direction (or documentation)?

draftjs react-hooks reactjs
1 Answers

here how i tried this, purely react hooks way to achieving things,

App.js file

import MyEditor from './Component/MyEditor';

function App() {
   <MyEditor />
}

MyEditor.js file export MyEditor component used and imported in App.js

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 file for styling

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