elementary-editor
A WYSWYG editor based on DraftJS and Ant.Design.
Last updated 2 years ago by fdemian .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install elementary-editor 
SYNC missed versions from official npm registry.

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
  • 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

Current Tags

  • 0.8.19                                ...           latest (11 days ago)

59 Versions

  • 0.8.19                                ...           11 days ago
  • 0.8.17                                ...           2 months ago
  • 0.8.16                                ...           2 months ago
  • 0.8.15                                ...           3 months ago
  • 0.8.14                                ...           3 months ago
  • 0.8.13                                ...           3 months ago
  • 0.8.12                                ...           3 months ago
  • 0.8.11                                ...           3 months ago
  • 0.8.10                                ...           5 months ago
  • 0.8.9                                ...           5 months ago
  • 0.8.8                                ...           5 months ago
  • 0.8.7                                ...           a year ago
  • 0.8.6                                ...           a year ago
  • 0.8.4                                ...           a year ago
  • 0.8.3                                ...           a year ago
  • 0.8.2                                ...           a year ago
  • 0.8.1                                ...           a year ago
  • 0.8.0                                ...           a year ago
  • 0.7.0                                ...           2 years ago
  • 0.6.21                                ...           2 years ago
  • 0.6.20                                ...           2 years ago
  • 0.6.19                                ...           2 years ago
  • 0.6.18                                ...           2 years ago
  • 0.6.17                                ...           2 years ago
  • 0.6.16                                ...           2 years ago
  • 0.6.15                                ...           2 years ago
  • 0.6.14                                ...           2 years ago
  • 0.6.13                                ...           2 years ago
  • 0.6.12                                ...           2 years ago
  • 0.6.11                                ...           2 years ago
  • 0.6.10                                ...           2 years ago
  • 0.6.9                                ...           2 years ago
  • 0.6.8                                ...           2 years ago
  • 0.6.7                                ...           2 years ago
  • 6.6.6                                ...           2 years ago
  • 0.6.5                                ...           2 years ago
  • 0.6.4                                ...           2 years ago
  • 0.6.3                                ...           2 years ago
  • 0.6.2                                ...           2 years ago
  • 0.6.1                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.3                                ...           2 years ago
  • 0.5.1                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.9                                ...           2 years ago
  • 0.4.8                                ...           2 years ago
  • 0.4.7                                ...           2 years ago
  • 0.4.6                                ...           2 years ago
  • 0.4.5                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.1.7                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 24
Last Day 0
Last Week 0
Last Month 1
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |