aiyingya/react-summernote

Summernote (Super simple WYSIWYG editor) adaptation for react

react-summernote

Summernote adaptation for react (Headache free)

Getting Started

Install

npm install react-summernote

Configure Webpack

Add ProvidePlugin to your webpack config

new webpack.ProvidePlugin({
	$: "jquery",
	jQuery: "jquery"
})

Example

import React, { Component } from 'react';
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css'; // import styles
import 'react-summernote/lang/summernote-ru-RU'; // you can import any other locale

// Import bootstrap(v3 or v4) dependencies
import 'bootstrap/js/modal';
import 'bootstrap/js/dropdown';
import 'bootstrap/js/tooltip';
import 'bootstrap/dist/css/bootstrap.css';

class RichTextEditor extends Component {
  onChange(content) {
    console.log('onChange', content);
  }

  render() {
    return (
      <ReactSummernote
        value="Default value"
        options={{
          lang: 'ru-RU',
          height: 350,
          dialogsInBody: true,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview']]
          ]
        }}
        onChange={this.onChange}
      />
    );
  }
}

export default RichTextEditor;

PropTypes

Property	Type	Description
value	String	Default value
codeview	Boolean	Option to render in codeview mode
options	Object	Options object. More info about options http://summernote.org/deep-dive
onInit	Function	Being invoked when summernote is launched
onEnter	Function	Enter/Return button pressed
onFocus	Function	Editable area receives the focus
onBlur	Function	Editable area loses the focus
onKeyDown	Function	e.keyCode is pressed
onKeyUp	Function	e.keyCode is released
onPaste	Function	Triggers when event paste's been called
onChange	Function	handler: function(contents, $editable) {}, invoked, when content's been changed
onImageUpload	Function	handler: function(files) {}

Static methods

reset() // Clear contents and remove all stored history
insertImage(url, filenameOrCallback) // Insert a image
insertNode(node) // Insert a element or textnode
insertText(text) // Insert a text

Example

ReactSummernote.insertImage(`/resources/getImage?imageGuid=${image.imageGuid}`, $image => {
	$image.css("width", Math.floor($image.width() / 2));
	$image.attr("alt", image.name);
});