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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago