react-pell
React component wrapping a HTML and Markdown editor based on the wysiwyg pell editor
Contents
Getting started
Install react-pell as dependency :
yarn add react-pell
Basic example :
import React, { Component } from 'react';import Editor from 'react-pell' class App extends Component { handleChange(html) { console.log(html) } render() { return ( <Editor onChange={this.handleChange.bind(this)} /> ); }} export default App;
HTML editor
A basic wrapping of the pell editor.
Import the Editor :
import Editor from 'react-pell'
Example :
<Editor defaultContent="<b>hello world</b>" actions={['bold', 'italic']} actionBarClass="my-custom-class" onChange={this.handleChange} />
Prop types :
property | type | required | description |
---|---|---|---|
onChange | func | true | function handling changes from the editor, the output html is the first parameter |
defaultContent | string | false | default content of the editor (HTML serialized in a string) |
actions | array | false | table of available actions or custom actions in the editor (watch pell documentation for more details) Note: pell instance is given at first parameter of result callback of custom actions. (default: ['bold', 'italic', 'underline', 'strikethrough', 'heading1', 'heading2', 'olist', 'ulist', 'quote', 'code', 'line'] ). |
styleWithCSS | bool | false | outputs styles with css instead of HTML elements (default: false ) |
containerClass | string | false | class name of the container (default: pell-container ) |
actionBarClass | string | false | class name of the action bar (default: pell-actionbar ) |
buttonClass | string | false | class name of buttons (default: pell-button ) |
contentClass | string | false | class name of the content (default: pell-content ) |
Markdown editor
This editor plugin extends the behaviour of pell to edit markdown. We are using following libraries to manage markdown :
- html to markdown :
to-markdown
- markdown to html :
showdown
Import the Editor :
import Editor from 'react-pell/plugins/markdown'
Example :
<Editor defaultContent="**hello world**" actions={['bold', 'italic']} actionBarClass="my-custom-class" onChange={this.handleChange} gmf={false} />
Prop types :
Same props as the Basic HTML pell editor with following props added :
property | type | required | description |
---|---|---|---|
converters | array | false | converters used to handle custom convertions from HTML to markdown. see to-markdown documentation for more details |
gmf | bool | true | beta support for GitHub flavored markdown (GFM) |
LICENSE
MIT