DraftJS Plugin Editor
This a playground to explore a plugin architecture on top of draft-js.
Available Plugins
- Stickers
- Hashtags
- Linkify
- Mentions
Live Example
Checkout the website!
Usage
First, install the editor with npm
:
$ npm install draft-js-plugin-editor --save
and then import it somewhere in your code and you're ready to go!
;
Documentation
draft-js-plugin-editor
Editor
An editor component accepting plugins.
Props | Description | Required |
---|---|---|
editorState | see here | * |
onChange | see here | * |
plugins | an array of plugins | |
all other props accepted by the DraftJS Editor | see here |
Usage:
;;;;; const hashtagPluginInstance = ;const linkifyPluginInstance = ; const plugins = hashtagPluginInstance linkifyPluginInstance; state = editorState: EditorState ; { this; }; { return <Editor editorState=thisstateeditorState onChange=thisonChange plugins=plugins spellCheck readOnly= thisstatereadOnly ref="editor" /> ; }
createWithText
Function to creates an EditorState with some text.
Usage:
; const editorState = ;
Plugins
draft-js-sticker-plugin
draft-js-hastag-plugin
draft-js-linkify-plugin
How to write a Plugin
Feel free to copy any of the existing plugins as a starting point. Feel free to directly contact @nikgraf in case you need help or open a Github Issue!
You can also join the development team at #plugin-editor channel in the draftJS Slack. Sign up here: https://draftjs.herokuapp.com/.
More documentation is coming soon…
Development
npm install
cd site
npm install
npm start
License
MIT