3.0.0 • Published 5 years ago

draft-js-plugins-editor v3.0.0

Weekly downloads
71,586
License
MIT
Repository
github
Last release
5 years ago

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

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

PropsDescriptionRequired
editorStatesee here*
onChangesee here*
pluginsan array of plugins
decoratorsan array of custom decorators
defaultKeyBindingsbool
defaultBlockRenderMapbool
all other props accepted by the DraftJS Editor except decoratorsee 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

@plone/voltofarmhouse@kratkaui/task@doctorlogic/compoenentsseamlessdocs-client@trungduy1995nd/draft-editorzq-reactuislash-common-components@fireblaze/interface@inke-design/inlineeditreact-webpack-babel-sass-boilerplate@mediatool/mt-conversations-frontend@infinitebrahmanuniverse/nolb-draf@everything-registry/sub-chunk-1513merchi-product-formletsjamhenrybuilt-react-librarykbsnd3kms-web-editorkderno-rich-editorkditorjsgreenponentslast-draftitfn-cms-render-templatesjam-pluginminan-react-draftmarketmuse-componentsmomentech-viewhearthlounge-design-systemjumbo-reactmaby-markdown-editorm-dash-uimerchant-dashboardmerchi_product_formnomad-universalmaterial-ui-rtemath-draft-js-collectionmegadraft-with-pluginsmedium-draft-pluginsmedium-draft-plugins-editoreasy-react-libep-react-uifs-editorfed.rich-editorfieldstackgivebox-libformalist-standard-reacthandlebars-textboxoneteam-rtequill-component-libraryqhc_job_uiqlu-20-ui-libraryopencrud-adminreact-rte-filepickerreact-rte-mentionreact-spaceship-webzq-react-ui@eeacms/volto-forest-policy@expandorg/richtext@fortemtech/olympian-react-library@httpeacejs/react-page-editorublend-draftjsubidy_ui_kitui-componentsvertical-draft-editortransactions-draft-editortest_ui_kitunravelauunravelau_webpack@justame-ricos/wix-rich-content-editor@microduino/micdesignwix-rich-content-editorz-panelzerostrength-calendarzhen-dongworknet-text-card@eeacms/volto-addons-forestshaka-clientsodiumeditorsynops-commentssy-components-teststarry-editorstatesauce-uispec-content-editorrich-editor-testrichareareact-valiformrecruit-richareasimple-draftjssimon-editor-clonerc-editorreact-ant-editor@lebaotrung/react_draft-js@ubidy_devs/ubidy_ui_kit@ubidy_devs/ubidy-ui-kit-unstable@times-tooling/rich-text-editor@triniti/cms@platzi/editor@plone/plone-react@sirena/earth-common
3.0.0

5 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

2.0.0-rc8

7 years ago

2.0.0-rc7

7 years ago

2.0.0-rc5

7 years ago

2.0.0-rc4

7 years ago

2.0.0-rc3

7 years ago

2.0.0-rc2

7 years ago

2.0.0-rc1

7 years ago

2.0.0-beta11

7 years ago

2.0.0-beta10

7 years ago

2.0.0-beta9

7 years ago

2.0.0-beta8

7 years ago

2.0.0-beta7

7 years ago

2.0.0-beta6

7 years ago

2.0.0-beta5

8 years ago

2.0.0-beta.4

8 years ago

2.0.0-beta.3

8 years ago

2.0.0-beta.2

8 years ago

2.0.0-beta1

8 years ago

1.1.0

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

1.0.0-beta1

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago

0.0.0

8 years ago