rpe
react-pell-enhanced
npm i react-pell-enhanced
rpe

react-pell-enhanced

React component wrapping the wysiwyg pell editor for HTML and Markdown

by Benjamin Petetot

0.0.0 (see all)License:MITTypeScript:Not Found
npm i react-pell-enhanced
Readme

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 :

propertytyperequireddescription
onChangefunctruefunction handling changes from the editor, the output html is the first parameter
defaultContentstringfalsedefault content of the editor (HTML serialized in a string)
actionsarrayfalsetable 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']).
styleWithCSSboolfalseoutputs styles with css instead of HTML elements (default: false)
containerClassstringfalseclass name of the container (default: pell-container)
actionBarClassstringfalseclass name of the action bar (default: pell-actionbar)
buttonClassstringfalseclass name of buttons (default: pell-button)
contentClassstringfalseclass 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 :

propertytyperequireddescription
convertersarrayfalseconverters used to handle custom convertions from HTML to markdown. see to-markdown documentation for more details
gmfbooltruebeta support for GitHub flavored markdown (GFM)

LICENSE

MIT

Downloads/wk

2

GitHub Stars

31

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

7

OPEN PRs

23
VersionTagPublished
0.0.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial