Skip to content

React component wrapping the wysiwyg pell editor for HTML and Markdown

License

Notifications You must be signed in to change notification settings

bpetetot/react-pell

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 :

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