GitHub - draft-js-plugins/draft-js-plugins: React Plugin Architecture for Draft....
source link: https://github.com/draft-js-plugins/draft-js-plugins
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
DraftJS Plugins
High quality plugins with great UX on top of DraftJS.
Available Plugins (incl. Docs)
Built by the community
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-plugins/hashtag';
import createLinkifyPlugin from '@draft-js-plugins/linkify';
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.
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK