heyan01 / react-editor

(WIP) Rich-Text Editor that behaves like Tencent QQ's.

(WIP) react-editor

React component of contentEditable Rich-Text Editor that behaves like Tencent QQ's.

• Rich-Text (includes texts, images)
• Selection (range clear, save, restore)
• Format (filters on paste, cleans on blur)
• Parse (content tokenizing)
• Qface & Emoji Insertion
• Font Settings (name, size, bold, color)
• Drop dependency of the fucking jquery ;)

$ npm i -S jquery react-editor

import React, { Component } from 'react'
import Editor from 'react-editor'

class Page extends Component {

  onFocus() {
    this.refs.editor.restoreRange()
  }
  onBlur() {
    const { editor } = this.refs
    editor.lint()
    editor.saveRange()
    editor.clearRange()
  }
  
  render() {
    return (
      <div onFocus={(e) => this.onFocus(e)}
        onBlur={(e) => this.onBlur(e)}>
        <Editor ref="editor" className={styles.editor}
          dangerouslySetInnerHTML={{__html: html}} />
      </div>
    )
  }
}