react-summernote How do you install a plugin?

I tried adding a script for a plugin to the bottom of my react app, but it's not picked up when I add it to the plugins in React

I add the Summernote image attributes:

<body>
    <div id="root"></div>
  </body>
  <script src="/summernote-image-attributes.js"></script>

Then include in react:

<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']]
          ],
          **popover: {
            image: [
                ['custom', ['imageAttributes']],
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ]}**
        }}
        onChange={this.onChange}
      />

But nothing changes

Mar 03 '18 18:03 GraemeFulton

I'm experiencing the same issue, does anyone have an idea on how exactly should this be done?

Mar 16 '18 20:03 jakeols

You need to find the npm module and install it (ex: npm i @dsvllc/summernote-image-attributes) , then import the plugin (ex: import ImagePulgin from '@dsvllc/summernote-image-attributes') in the component where you use <ReactSummernote> and it should work.

In case there is no npm module try: https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx

Feb 12 '19 15:02 AdrianPasalega

Here is how I made it working :

Install the library

yarn add <plugin name> if there's an NPM package existing on npmjs.com
yarn add <Git URL to the repository> if there's a public git repository. You can also add the last commit SHA to the yarn command by adding a dash # and then the commit SHA avoiding to update the plugin accidentally.

Require the plugin code and CSS from the JSX file where you're mounting ReactSummernote :

import React from 'react'
import ReactSummernote from 'react-summernote'
import 'react-summernote/dist/react-summernote.css'
// ...

import 'plugin name here'
import 'plugin CSS file path here'

const MyComponent = () => (
  <ReactSummernote options={{ ... }} />
)

export default MyComponent

A non-NPM example

Let's say I'd like to add the summernote-paper-size plugin which doesn't have a published NPM package, nor a package.json file (I have to give the path to the JavaScript file) :

yarn add https://github.com/DiemenDesign/summernote-paper-size.git#0a9d09b3d09a22e9d824e66e0836dfb8cdf9773d

import React from 'react'
import ReactSummernote from 'react-summernote'
import 'react-summernote/dist/react-summernote.css'

import 'summernote-paper-size/summernote-paper-size'

const MyComponent = () => (
  <ReactSummernote
    options={{
      ['paperSize', ['paperSize']]
    }}
  />
)

export default MyComponent

I also added the line @import "summernote-paper-size/css/css.css"; in my SCSS file of my application so that the plugin's CSS is available.

An NPM example

Let's say I'd like to add the summernote-ext-print plugin :

yarn add summernote-ext-print

import React from 'react'
import ReactSummernote from 'react-summernote'
import 'react-summernote/dist/react-summernote.css'

import 'summernote-ext-print'

const MyComponent = () => (
  <ReactSummernote
    options={{
      ['misc', ['print']]
    }}
  />
)

export default MyComponent

Nov 13 '22 19:11 zedtux

react-summernote react-summernote copied to clipboard

How do you install a plugin?

A non-NPM example

An NPM example

react-summernote
react-summernote copied to clipboard