A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg

Overview

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.

Comments
  • Custom toolbar

    Custom toolbar

    Really promising project you have here! We've been looking to part ways with Summernote for a while now and this might just be it. Would you be open to having a way to configure the toolbar through props a bit like it's done in Summernote: http://summernote.org/deep-dive/#custom-toolbar-popover

    Thanks!

    opened by mathieumg 26
  • Uncaught TypeError: editorState.getImmutable is not a function

    Uncaught TypeError: editorState.getImmutable is not a function

    I've got this error whenever I issued any actions with the editor.

    Uncaught TypeError: editorState.getImmutable is not a function
        at Function.set (EditorState.js:78)
        at e.value (react-draft-wysiwyg.js:38)
        at ReactCompositeComponent.js:611
        at measureLifeCyclePerf (ReactCompositeComponent.js:75)
        at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610)
        at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
        at Object.receiveComponent (ReactReconciler.js:125)
        at Object.updateChildren (ReactChildReconciler.js:109)
        at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
        at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
    

    Code (unnecessary details omitted)

    import {Editor} from "react-draft-wysiwyg";
    import {EditorState} from "draft-js"
    
    this.state = {
          detail: EditorState.createEmpty(),
    };
    
    onDetailChange(value) {
        this.setState({ detail: value });
        this.props.onChange({ ...this.state, detail: value });
     }
    
    <Editor editorState={this.state.detail} onChange={this.onDetailChange.bind(this)} />
    
    opened by ryanaleksander 17
  • Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

    Warning: validateDOMNesting(...):

    I'm getting this warning.

    Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See DraftEditorContents > p > ... > DraftEditorBlock > div.

    The problem is this <p> here https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/src/components/Editor/index.js#L151

    Pull request coming soon.

    bug 
    opened by orditeck 16
  • Loading HTML content into editor

    Loading HTML content into editor

    Maybe is a basic question (actually I guess is not related with your current draft based editor), but I don't get at all how draftjs works. I've been trying to load some html using the demo as example and so far I've tried something like this:

    import React from 'react'
    import { Modal } from 'react-bootstrap'
    import { Editor } from 'react-draft-wysiwyg';
    import draftToHtml from 'draftjs-to-html';
    import { convertFromHTML, ContentState, convertToRaw } from 'draft-js';
    
    
    export default class EditDescriptionModal extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {editorContent: this._getInitialHTML()};
      }
    
      _getInitialHTML() {
        const contentBlocks = convertFromHTML('<p>Hello world</p>');
        const contentState = ContentState.createFromBlockArray(contentBlocks);
        return convertToRaw(contentState);
      }
    
      onEditorChange(editorContent) {
        console.log(draftToHtml(editorContent))
        this.setState({ editorContent });
      };
    
      render(){
        const { editorContent } = this.state;
        return(
          <Modal  show={this.props.showModal} onHide={this.props.onClose}
                  bsSize="large" >
            <form className="form-horizontal" >
              <Modal.Header closeButton>
                <Modal.Title>Edit description</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <div className="demo-editorSection">
                  <div className="demo-editorWrapper">
                    <Editor
                      rawContentState={editorContent}
                      toolbarClassName="demo-toolbar"
                      wrapperClassName="demo-wrapper"
                      editorClassName="demo-editor"
                      onChange={this.onEditorChange.bind(this)}
                      toolbarAlwaysVisible
                    />
                  </div>
                </div>
              </Modal.Body>
              <Modal.Footer>
                <button type="submit" className="btn btn-info">Submit</button>
                <button type="button" className="btn"
                        onClick={this.props.onClose}>Close</button>
              </Modal.Footer>
            </form>
          </Modal>
        )
      }
    }
    
    

    So is supposed it should display that <p>Hello world</p> as initial editor content passing to the rawContentState of the Editor component, but I think I'm wrong. In any case, if I add some text to the editor, is correctly converted to HTML in the onEditorChange function. What I'm doing wrong here?. BTW, kudos for the great work done

    opened by alagos 16
  • SSR window is not defined

    SSR window is not defined

    Hey guys,

    after the update from 1.13.2 to 1.14.0 I get the following error: ReferenceError: window is not defined

    So I assume it doesn't support the building in SSR environments. Can you please check the error and make sure this is fixed? I can also create a pull Request if you like

    opened by hnaoufal 15
  • automatically focus cursor in text area after draft wysiwyg editor renders

    automatically focus cursor in text area after draft wysiwyg editor renders

    I was able to automatically focus cursor in text area after draft wysiwyg editor mounts, Just leaving this here for others.

    class MyEditor extends React.Component {
      constructor(){
        super();
        this.setDomEditorRef = ref => this.domEditor = ref;
      }
      componentDidMount(){
        // as per method in https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js
        this.domEditor.focusEditor();
      }
      render() {
        return (
            <Editor
              ref={this.setDomEditorRef}
              {/*  other attributes etc etc */}
             />
        )
      }
    
    opened by PrimeLens 15
  • how to add math formula support in Editor

    how to add math formula support in Editor

    Hi,

    your module is awesome and fulfil my most requirements but i am new to draftjs and want help to add math formula support for my app as it is for educational domain.

    thanks & Regards gmchaturvedi

    opened by gmchaturvedi1 15
  • component shows image as camera icon

    component shows image as camera icon

    Hey, I'm using "react-draft-wysiwyg": "^1.12.4".

    while adding an image to the text, everything goes well, but when I'm loading the HTML with the img tag back to the component, I get a camera icon instead of showing the image.

    screen shot 2018-01-15 at 3 19 13 pm

    the parsing process looks like :

    const blocksFromHTML = convertFromHTML(response['signature']);
          const text = ContentState.createFromBlockArray(
              blocksFromHTML.contentBlocks,
              blocksFromHTML.entityMap
            );
            
            this.setState({
              editorState: EditorState.createWithContent(text)
    })
    

    response.signature is the HTML, looks like :

    <p>-- -- <br><strong>Lunes Test</strong>  |  Sales Executive<br>+1 (888) 888-8888</p>
    <img src="https://s3.amazonaws.com/exceedbot-webchat/monday.gif" alt="undefined" style="float:left;height: auto;width: auto"/>
    <p></p>
    

    Thanks for helping!

    opened by sahar922 13
  • Upon uploading image using editor file-uploader, editor could not read img tag.

    Upon uploading image using editor file-uploader, editor could not read img tag. "Unknown DraftEntity key: null." erros occurs

    When i upload image using file-uploader of editor and save the content, it is working fine. But when i try to load the saved content in the editor that has img tag, it throws error saying "Unknown DraftEntity key: null."

    Here is the stack trace message: stack : "Invariant Violation: Unknown DraftEntity key: null.↵ at invariant (webpack-internal:///15:42:15)↵ at Object.__get (webpack-internal:///224:166:27)↵ at ContentState.getEntity (webpack-internal:///333:155:24)↵ at eval (webpack-internal:///1396:6:208832)↵ at DraftEditorContents.render (webpack-internal:///1416:115:28)↵ at eval (webpack-internal:///995:793:21)↵ at measureLifeCyclePerf (webpack-internal:///995:73:12)↵ at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack-internal:///995:792:25)↵ at ReactCompositeComponentWrapper._renderValidatedComponent (webpack-internal:///995:819:32)↵ at ReactCompositeComponentWrapper.performInitialMount (webpack-internal:///995:359:30)" proto : Object

    But once i removed the img tag, the editor is loading the content fine without any errors.

    Please help me solve the issue

    opened by ShrawanLakhe 13
  • Indent and outdent not working

    Indent and outdent not working

    Hi

    In Editor, Indent and Outdent is not working.

    Actual Result: -- Clicking on Indent icon and outdent icon has no effect on content of the Editor.

    Expected Result: --Indent icon and outdent icon should work as expected.

    opened by gopinath-sixt 13
  • Code Block support

    Code Block support

    Is there any way we could get code block support to do the equivalent of

    var x,
        y,
        z;
    

    Currently it looks like there is only inline code support.

    opened by chiedo 13
  • Update react Package

    Update react Package

    Hello, Instead of react 16 replace with react 18 (you can still use class component), you will have some change to do in interface and work for learn to make it the same. Instead of "prop-types": "^15.7.2", you have tsx but I understand that need a lot of work and time : /. Instead to install draft-js separetly that is very bad idea I think because you have npm dedupe and solving issue comes to be multiplicative because of multiple versions.

    opened by c0ncentus 0
  • Is there a callback like onChange for when font changed?

    Is there a callback like onChange for when font changed?

    I have a use case where I need to know when the fontFamily has changed.

    I expected the fontFamily menu item to have a prop for onChange but it doesn't look like it has it?

    How can I listen for when the font specifically has changed (and also get the new font family name)?

    opened by jrohlandt 0
  • overlap issue in ipad and iphone

    overlap issue in ipad and iphone

    when we select text in iphone or ipad and then we open dropdown for selecting font size it is not working because default selector of iphone overlapps dropdown Screenshot from 2022-08-18 17-31-26

    opened by gajendraHL 0
  • Twitter link embed displays

    Twitter link embed displays "404 Page Not Found" instead of the tweet.

    I've searched around google to find a fix for this or find a reason why this is happening but i couldn't find anything. When i copy and paste twitter embed code to the embed box in the editor, it displays "404 Page Not Found" instead of the embedded tweet.

    I'm using this package with NextJS. Anyway i can fix this?

    opened by alphadrivee 0
Owner
Jyoti Puri
Developer. Full-Stack JS, ReactJS, React Native, Prosemirror.
Jyoti Puri
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility

Megadraft Rich Text editor built on top of Facebook's draft.js Discussion and Support Join the #megadraft channel on the DraftJS Slack team! Live Exam

Globo.com 1.1k Sep 30, 2022
intuitive block based wysiwyg editor built with React and ProseMirror

intuitive block based wysiwyg editor built with React and ProseMirror

appleple 251 Sep 9, 2022
Wysiwyg / Text editor components built using React and Prosemirror

Wysiwyg / Text editor components built using React and Prosemirror

Nib 216 Sep 8, 2022
Wysiwyg / Text editor components built using React and Prosemirror

NIB Demo Despite various options available for rich text editing in html, it continues to be extremely challenging area. I found prosemirror to be the

Nib 216 Sep 8, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 33.7k Sep 24, 2022
React wrapper for lightweight WYSIWYG editor Trumbowyg

React-Trumbowyg React wrapper for trumbowyg. If you ❤️ library, please star it and upvote it on awesome-react-components Table of contents How do I ad

RD17 139 Sep 19, 2022
React Blog with Firebase & WYSIWYG text editor

React Blog with Firebase & WYSIWYG text editor

Joni Rinta-Kahila 2 Feb 26, 2022
React component for Froala WYSIWYG HTML Rich Text Editor.

React JS Froala WYSIWYG Editor react-froala-wyswiyg provides React bindings to the Froala WYSIWYG editor VERSION 3. Installation npm install react-fro

Froala 519 Sep 15, 2022
WYSIWYG editor based on CKEditor with completely rewritten UI

Alloy Editor Alloy Editor is a modern WYSIWYG editor built on top of CKEditor, designed to create modern and gorgeous web content. Works on IE11, Chro

Liferay Inc. 1.3k Sep 19, 2022
📝🍸 A configurable rich text editor built with Draft.js

Draftail ?? ?? A configurable rich text editor built with Draft.js. Check out our demos! Features Draftail aims for a mouse-free, keyboard-centric exp

Springload 566 Sep 17, 2022
Codeone is a web app built on top of React which includes an IDE supporting multiple languages for programming in addition with a highly customizable Web Editor supporting real time changes

Codeone is a web app built on top of React which includes an IDE supporting multiple languages for programming in addition with a highly customizable Web Editor supporting real time changes

Dhruv Pasricha 19 Jul 9, 2022
Monaco Editor for React - use the monaco-editor in any React application

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

Suren Atoyan 2k Oct 1, 2022
React Trix rich text editor is react wrapper built for the Trix editor

React wrapper for Trix rich text editor created by Basecamp

Abhay Nikam 65 Jun 10, 2022
for-editor - A markdown editor based on React

for-editor for-editor 是一个基于 react 的 markdown 语法编辑器 English Documents demo github 安装 npm install for-editor -S 使用 import React, { Component } from 'rea

kkfor 388 Sep 5, 2022
Markdown-editor - React markdown editor with preview

React Markdown Editor with preview How cool would it be to have a markdown edito

Alvaro Castillo 2 Jan 11, 2022
JS React based rich editors based on Draft.js

React - Rich editors Synopsis React rich-editors-like components. Based on draft-js. Package provide these public components: RichEditor EmailRichEdit

OpusCapita Solutions 3 Jul 8, 2021
Awesome list of Draft.js resources

Awesome Draft.js Draft.js is a framework for building rich text editors in React. Table of Contents Community Presentations Projects on Top of Draft.j

Nik Graf 2.4k Sep 19, 2022
React Oxide is a simple code editor that you can add to your ReactJS projects.

React Oxide is a simple code editor that you can add to your ReactJS projects.

bootrino 127 Aug 28, 2022
✏️ A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs, and Create-react-app

Markdown Editor A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs and Create-react-app Preview Markdown Editor

Lam Pham 29 Jul 1, 2022