npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

elementary-editor

0.6.14 • Public • Published

Elementary Editor

A WYSWYG editor based on DraftJS and Ant.Design.

Getting Started

Prerequisites

You will need:

Usage

To use this editor in your project:

  • Install the npm package:
 yarn add elementary-editor
  • Import the editor and use it on your code:
import Editor from 'elementary-editor';
  
class MyComponent extends Component  {
 /*
 ...
 */
 render() {
  return(
   <div>
     <Editor 
       initialState={null} 
       ref={(editor) => this.editor = editor}
     />   
   );
 }

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

Keywords

none

install

npm i elementary-editor

Downloadsweekly downloads

9

version

0.6.14

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability