react-pell-enhanced v0.0.0

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 :

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 :

LICENSE

MIT