G-Editor

A Rich Text Editor based on Draft.js

Featuresss

• Block Style: Headings, Blockquote, UL, OL, Code Block
• Inline Style: Bold Italic Underline Monospace
• Image: from link or uploading by drag and drop, or pasting from clipboard (Chrome only)
• Link: adding or removing links

Usage

install this module

npm install --save g-editor
# or 
npm install --save [e-mail]:hippy-web/g-editor.git

import in your project

import React from 'react'
import GEditor from 'g-editor'
 
class App extends React.Component {
  render() {
    return (
      <GEditor
        ref="editor"
        uploadFieldName="reqFile"
        uploadURL="/api/upload"
        responseFieldName="resFile"
        maxFileSize={5 * 1024 * 1024}
        />
      )
  }
 
  _getEditorContent = () => {
    this.refs.editor.getCurrentContent() // return the current content in editor
  }
}

Required Props

• uploadFieldName: the field name in form data to upload your images
• uploadURL: the URL to upload your images
• responseFieldName: the field name that returned by the upload API
• maxFileSize: the max size limitation for upload images, in bytes (eg. 5 * 1024 * 1024 is 5 MB)

you should implement a file upload API yourself, and provide field name and URL, the api should return the json below

{
  [responseFieldName]: "/path/to/image.jpg"
}

Contribution

Issues and pull requests are very welcomed.