Wondering what’s next for npm?Check out our public roadmap! »

    react-summernote

    2.0.2 • Public • Published

    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

    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);
    });

    Install

    npm i react-summernote

    DownloadsWeekly Downloads

    3,563

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    1.13 MB

    Total Files

    142

    Last publish

    Collaborators

    • avatar