elementary-editor v1.0.0

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

Styles

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

Methods

• Internal editor methods.

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