react-pell

React component wrapping a HTML and Markdown editor based on the wysiwyg pell editor

Contents

• Getting started
• HTML Editor
• Markdown Editor

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