React-draft-wysiwyg-johgeocoder NPM

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.

npm.io

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-johgeocoder

$ npm install --save react-draft-wysiwyg-johgeocoder draft-js draftjs-to-html html-to-draftjs

Getting started

Editor can be used as simple React Component:

import React, { useState, useEffect } from 'react';
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';
import draftToHtml from 'draftjs-to-html';
import { Editor } from 'react-draft-wysiwyg-johgeocoder';
import 'react-draft-wysiwyg-johgeocoder/dist/react-draft-wysiwyg.css';

const App = () => {

  const [editorState, setEditorState] = useState(null)

  useEffect(() => {
    const html = '<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>';
    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const newEditorState = EditorState.createWithContent(contentState);
      setEditorState(newEditorState)
    }
  }, []) //run once on initial render
  
  useEffect(() => {
    if(editorState){
      var html = draftToHtml(convertToRaw(editorState.getCurrentContent()))
      console.log(html)
    }
  }) //Run every state change

  var onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState)
  }

  return <>
  <div style={{width: '600px', margin: '0 auto', border:'1px solid black'}}>
    <Editor
        editorState={editorState}
        hasHtmlEditorOption={true}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(newEditorState) => onEditorStateChange(newEditorState)}
      />
  </div>
  </>
}

export default App;