A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.
- 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.
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
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;
For more documentation check here.
For discussions join public channel #rd_wysiwyg in DraftJS Slack Organization.
Original motivation and sponsorship for this work came from iPaoo. I am thankful to them for allowing the Editor to be open-sourced.
MIT.