Elementary Editor

A WYSWYG editor based on Draft

Getting Started

Prerequisites

You will need:

• NodeJS
• Yarn

Usage

To use this editor in your project:

• Install the npm package:

 yarn add elementary-editor

• Then use the editor inside your code

Using Classes

import Editor from 'elementary-editor';

class MyComponent extends Component  {

 constructor(props) {
   super(props);
   this.state = { editorState: null }
   this.containerRef = null;
 }

 render() {
   return(
   <Editor
     initialState={null}
     containerRef={(editor) => this.editor = editor}
   />
   );
 }

}

Using hooks

import React, { useRef } from 'react';
import Editor from 'elementary-editor';

const MyComponent = () =>  {

 const containerRef = useRef(null);

 return(
 <div>
   <Editor
     initialState={null}
     containerRef={containerRef}
   />
 </div>
  );
}

The ref property is needed if you want to access the editor's internal methods.

To use the default renderer that is bundled with the editor:

import { DefaultRenderer } from 'elementary-editor';

class MyComponent extends Component  {
 /*
 ...
 */
 render() {
  return(
  <div>
    <DefaultRenderer raw={rawText} />
  </div>
  );
 }

Here rawText is a javascript object that contains a valid Draft-JS raw state object.

The ref property is needed if you want to access the editor's internal methods.

API

Properties

Name	Type	Default	Description
initialState	JSON string	null	A draft-js rawState object with the initial state of the editor. If set to null it will initialize the editor with no text.
filterStyles (optional)	string[]	null	A list of the styles the editor will use. If set it will only use those styles. If the parameter is null or isn't specified, all the available styles will be used.

Styles

Note: styles can be filtered by passing the style names to the filterStyles argument of the editor.

Name	Type	Description
BOLD	Inline	Bold text.
ITALIC	Inline	Italic text.
UNDERLINE	Inline	Underlined text.
STRIKETHROUGH	Inline	Strikethrough text.
blockquote	Block	Quote block.
header-two	Block	H2 element.
unordered-list-item	Block	Unordered list.
ordered-list-item	Block	Ordered list.
code-block	Block	Code block.
Link	Custom	Link
LinkRemove	Custom	Remove link.
Image	Custom	Image url.
Spoiler	Custom	Spoiler.
Video	Custom	Embeded video.
Latex	Custom	Latex formatted block.

Methods

• Internal editor methods.

Name	Parameters	Description
getContent	-	Gets the current DraftJS raw editor state.
clear	-	Clears the editor.

Built With

• React - A Javascript library for building user interfaces.
• DraftJS - Rich text editor framework for React.
• Ant.Design - A UI Design Language.

Authors

• Federico Caminiti - Maintainer

License

This project is licensed under the MIT License - see the LICENSE file for details