Draft-js-wysiwyg

A Wysiwyg editor built using React , Draft and Material-UI libraries.

Installation

Draft-js-wysiwyg is available as an npm package. You can install it using:

npm install draft-js-wysiwyg

#or
yarn add draft-js-wysiwyg

Please note that draft-js-wysiwyg depends on draft-js, @material-ui/core and @material-ui/lab which must also be installed.

Usage

Here is a very basic example to get you started.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  EditorContainer,
  Editor,
  InlineToggleButton,
  EditorToolbar,
  ToggleButtonGroup,
} from 'draft-js-wysiwyg';
import { EditorState } from 'draft-js';
import {
  FormatBold as FormatBoldIcon,
  FormatItalic as FormatItalicIcon
} from '@material-ui/icons';
import 'draft-js/dist/Draft.css';

const App = () => {
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty()
  );

  const editor = React.useRef(null);

  React.useEffect(() => {
    editor.current.focus();
  }, []);

  return (
    <EditorContainer
      editorState={editorState}
      onChange={setEditorState}
    >
      <EditorToolbar>
        <ToggleButtonGroup size="small">
          <InlineToggleButton value="BOLD">
            <FormatBoldIcon />
          </InlineToggleButton>
          <InlineToggleButton value="ITALIC">
            <FormatItalicIcon />
          </InlineToggleButton>
        </ToggleButtonGroup>
      </EditorToolbar>
      <Editor ref={editor} placeholder="Enter some text.." />
    </EditorContainer>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

You can see this live and interactive demo:

Examples

Are you looking for an example project to get started? We host some.

Documentation

Check out our documentation website.