@geosolutions/react-draft-wysiwyg

A wysiwyg on top of DraftJS.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@geosolutions/react-draft-wysiwyg
6,0106861.14.82 years ago3 years agoMinified + gzip package size for @geosolutions/react-draft-wysiwyg in KB

Popular Searches

Readme

React Draft Wysiwyg
A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page. Build Status

Features

  • Configurable toolbar with option to add/remove controls.
  • Option to change the order of the controls in the toolbar.
  • Option to add custom controls to the toolbar.
  • Option to change styles and icons in the toolbar.
  • Option to show toolbar only when editor is focused.
  • Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
  • Support for block types: Paragraph, H1 - H6, Blockquote, Code.
  • Support for setting font-size and font-family.
  • Support for ordered / unordered lists and indenting.
  • Support for text-alignment.
  • Support for coloring text or background.
  • Support for adding / editing links
  • Choice of more than 150 emojis.
  • Support for mentions.
  • Support for hashtags.
  • Support for adding / uploading images.
  • Support for aligning images, setting height, width.
  • Support for Embedded links, flexibility to set height and width.
  • Option provided to remove added styling.
  • Option of undo and redo.
  • Configurable behavior for RTL and Spellcheck.
  • Support for placeholder.
  • Support for WAI-ARIA Support attributes
  • Using editor as controlled or un-controlled React component.
  • Support to convert Editor Content to HTML, JSON, Markdown.
  • Support to convert the HTML generated by the editor back to editor content.
  • Support for internationalization.

Installing

The package can be installed from npm react-draft-wysiwyg ``` $ npm install --save react-draft-wysiwyg draft-js ```

Getting started

Editor can be used as simple React Component: ```js import { Editor } from 'react-draft-wysiwyg'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; ```

Docs

For more documentation check here.

Questions Discussions

For discussions join public channel #rdwysiwyg in DraftJS Slack Organization.

Thanks

Original motivation and sponsorship for this work came from iPaoo. I am thankful to them for allowing the Editor to be open-sourced.

License

MIT.
Fork info
This repo has been forked because we needed to add these fixes:
  • https://github.com/geosolutions-it/react-draft-wysiwyg/tree/0573508b1617a7a2c9827dcf1fe8ab2596f7d9c1
  • https://github.com/geosolutions-it/react-draft-wysiwyg/tree/5fcc3915072df30adb6f781272161642c61f9b59