1.2.1 • Published 3 years ago
draft-js-wysiwyg v1.2.1
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.
1.2.1
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago