rs

react-summernote

Summernote (Super simple WYSIWYG editor) adaptation for react

Showing:

Popularity

Downloads/wk

3.3K

Maintenance

No Maintenance Data Available

Package

Dependencies

3

Size (min+gzip)

43.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-summernote

Summernote adaptation for react (Headache free)

npm version

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

PropertyTypeDescription
valueStringDefault value
codeviewBooleanOption to render in codeview mode
optionsObjectOptions object. More info about options http://summernote.org/deep-dive
onInitFunctionBeing invoked when summernote is launched
onEnterFunctionEnter/Return button pressed
onFocusFunctionEditable area receives the focus
onBlurFunctionEditable area loses the focus
onKeyDownFunctione.keyCode is pressed
onKeyUpFunctione.keyCode is released
onPasteFunctionTriggers when event paste's been called
onChangeFunctionhandler: function(contents, $editable) {}, invoked, when content's been changed
onImageUploadFunctionhandler: 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);
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100