Noncommital Premarital Mischief

npm

Need private packages and team management tools?Check out npm Orgs. »

elementary-editor

0.8.10 • 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}
     />   
   );
 }

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

Keywords

none

install

npm i elementary-editor

Downloadsweekly downloads

341

version

0.8.10

license

none

last publish

collaborators

  • avatar
Report a vulnerability