react-draft-wysiwyg

WebJar for react-draft-wysiwyg

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-draft-wysiwyg
Last Version

Last Version

1.6.5
Release Date

Release Date

Type

Type

jar
Description

Description

react-draft-wysiwyg
WebJar for react-draft-wysiwyg
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/jpuri/react-draft-wysiwyg

Download react-draft-wysiwyg

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-draft-wysiwyg/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-draft-wysiwyg</artifactId>
    <version>1.6.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-draft-wysiwyg/
implementation 'org.webjars.npm:react-draft-wysiwyg:1.6.5'
// https://jarcasting.com/artifacts/org.webjars.npm/react-draft-wysiwyg/
implementation ("org.webjars.npm:react-draft-wysiwyg:1.6.5")
'org.webjars.npm:react-draft-wysiwyg:jar:1.6.5'
<dependency org="org.webjars.npm" name="react-draft-wysiwyg" rev="1.6.5">
  <artifact name="react-draft-wysiwyg" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-draft-wysiwyg', version='1.6.5')
)
libraryDependencies += "org.webjars.npm" % "react-draft-wysiwyg" % "1.6.5"
[org.webjars.npm/react-draft-wysiwyg "1.6.5"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.npm : classnames jar [2.2.5,3)
org.webjars.npm : draftjs-utils jar [0.5.1,0.6)
org.webjars.npm : immutable jar [3.8.1,4)

Project Modules

There are no modules declared in this project.

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:

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;

Docs

For more documentation check here.

Questions Discussions

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

Fund

You can fund project at Patreon.

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.

Versions

Version
1.6.5