DraftJS Plugins
High quality plugins with great UX on top of DraftJS.
Available Plugins (incl. Docs)
- Alignment
- Counter
- Drag and Drop
- Emoji
- Focus
- Hashtag
- Image
- Inline Toolbar
- Linkify
- Mention
- Resizeable
- Side Toolbar
- Sticker
- Undo
- Video
- or build your own … :)
Built by the community
- Autolist by Max Wheeler/Icelab
- Block Breakout by Max Wheeler/Icelab
- Markdown Shortcuts by Atsushi Nagase
- Single Line by Max Wheeler/Icelab
- RichButtons by jasonphillips
- Katex by letranloc
- Mathjax by efloti
- Buttons by StevenIseki
- Color Picker by StevenIseki
- Embed by StevenIseki
- EmojiPicker by StevenIseki
- GifPicker by StevenIseki
- Link by StevenIseki
- Modal by StevenIseki
- Sidebar by StevenIseki
- Toolbar by StevenIseki
- Divider by simsim0709
- Code Editor by Max Stroiber/Spectrum
Live Example & Documentation
Checkout the website!
Usage
First, install the editor with npm:
$ npm install draft-js-plugins-editor --save
Then import the editor somewhere in your code and you're ready to go!
import Editor from 'draft-js-plugins-editor';
Documentation
draft-js-plugins-editor
Editor
An editor component accepting plugins. see source, Props, Description, Required, -----------------------------------------------, :------------:, -------:, editorState, see here, *, onChange, see here, *, plugins, an array of plugins, decorators, an array of custom decorators, defaultKeyBindings, bool, defaultBlockRenderMap, bool, all other props accepted by the DraftJS Editor except decorator, see here, Usage:
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import { EditorState } from 'draft-js';
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const plugins = [
linkifyPlugin,
hashtagPlugin,
];
export default class UnicornEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>
);
}
}
How to write a Plugin
Feel free to copy any of the existing plugins as a starting point.In this repository you can also find a Guide on how to create a plugin, including a description of the supported features. In addition you can contact @nikgraf directly in case you need help or simply open a Github Issue!
Discussion and Support
Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.
Development
Check out our Contribution Guide.
Learn about why Draft.js and how to use DraftJS Plugins
In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.
Maintainers
This project was initiated by Nik Graf and is maintained by Julian Krispel. Julian is a draft.js consultant and available for hire, you can get in touch with him on his website, react rocket
License
MIT