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

react-summernote's Issues

Insert html on pasting some image and text not working

I was trying to copy and paste formatted content with images but it is only pasting text format.

<ReactSummernote
        className="form-summernote"
        value={input.value}
        options={{
          height: 200,
          dialogsInBody: true,
          disableResizeEditor: true,
          buttons,
          toolbar,
        }}
        onChange={this.onEditorChange}
        onBlur={this.onEditorBlur}
        onFocus={this.onEditorFocus}
        onImageUpload={this.onImageUpload}
        ref={(el) => { this.summernoteComponentRef = el }}
      />

This is preview of my react component. I tried handling onPaste event myself with function below but copied content is getting paste twice like plain text + formatted text

onEditorPaste(event) {
    event.preventDefault();
    var pastedText = ''
    if (window.clipboardData && window.clipboardData.getData)// IE
        pastedText = window.clipboardData.getData('Text');
    else if (event.originalEvent.clipboardData && event.originalEvent.clipboardData.getData)
        pastedText = event.originalEvent.clipboardData.getData('text/html');
    event.currentTarget.innerHTML = pastedText
  }

<ReactSummernote
        className="form-summernote"
        value={input.value}
        options={{
          height: 200,
          dialogsInBody: true,
          disableResizeEditor: true,
          buttons,
          toolbar,
        }}
        onChange={this.onEditorChange}
        onBlur={this.onEditorBlur}
        onFocus={this.onEditorFocus}
        onImageUpload={this.onImageUpload}
        onPaste={this.onEditorPaste}
        ref={(el) => { this.summernoteComponentRef = el }}
      />

I looked inside source code of project there is not insertHTML function. Are we missing it or there is another way around to do it?

Difficulty installing this plugin (change suggested)

I was getting errors when installing this plugin, particularly linked to bootstrap and jquery.
I managed to solve them. Here is how.
I installed the modules jquery, and bootstrap (not bootstrap-react!)
I downloaded bootstrap.min.css and pasted it into the src folder

Here's the App.js I ended up with:

` // the import lines don't show as code, don't know why
import React, { Component } from 'react';
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css'; // import styles
import 'bootstrap'
import './bootstrap.min.css'
class SummernoteEditor extends Component {
onChange(content) {
console.log('onChange', content);
}

   render() {
     return (
       <ReactSummernote    value="Default value"
      options={{

      width:600,
      dialogsInBody: true,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture']],
        ['view', [ 'codeview']]
      ]
    }}
    onChange={this.onChange}
      />
     );
   }
 }
  export default SummernoteEditor;`

Usage with create React app

Hi, Im using this editor with create react app and I dont want to eject my app to modify the webpack config.

I have added bootstrap and jquery package.
yarn add [email protected] bootstrap

So I manually imported $ and jquery as follows and modified your example as follows.

But this causes Uncaught TypeError: $node.attr(...).tooltip is not a function.

`import React, { Component } from 'react';
import $ from 'jquery';
const jQuery = $;
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.js';
import 'bootstrap/js/dropdown.js';
import 'bootstrap/js/tooltip.js';
import 'bootstrap/dist/css/bootstrap.css';

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

render() {
return (
<ReactSummernote
value="Default value HTML"
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;`

How can I get the Html?

I need to get the html from the component, how can I do that, I don't see any api wrapping the original one:

var markupStr = $('#summernote').summernote('code');

Can you guys tell me a workaround or guide me if I'm wrong, please?

webpack build fail about bootstrap.css

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/julyyu/FrontEnd-Project/CPPCC.Web/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| /
| /! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
@ ./src/js/components/common/RichTextEditor.js 31:0-43
@ ./src/js/components/home/HomeNoticeAdd.js
@ ./src/js/services/sliderContent.js
@ ./src/js/containers/Application.jsx
@ ./src/js/router/Router.jsx
@ ./src/app.jsx
@ multi ./src/app webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server
webpack: Failed to compile.

use ReactSummernote same as Demo

i cant reslove this problem, please help~

the components do not re-render when the props 'value' changed .

Here is how I use :

The console log of defaultValue is right, but when it changes , the component does not re-render.
the textarea stay the last value.

render() {
    const { defaultValue } = this.props
    console.log("defaultValue")
    console.log(defaultValue)
    return (
      <ReactSummernote
        value={defaultValue}
        options={{
          lang: 'zh-CN',
          height: 150,
          dialogsInBody: true,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview']]
          ]
        }}
        onChange={this.onChange}
      />
    )
  }

navigator not found

navigator is not defined
ReferenceError: navigator is not defined
at Object. (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:10309:19)
at F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:9913:37
at Object. (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:9922:2)
at webpack_require (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:30:30)
at Object. (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:16970:1)
at Object. (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:17236:30)
at webpack_require (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:30:30)
at F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:76:18
at F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:79:10
at webpackUniversalModuleDefinition (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:3:20)
at Object. (F:\Projects\ollietjccom\node_modules\react-summernote\dist\react-summernote.js:10:3)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)

Used with Next.js SSR this error came up.

Tried rendering ReactSummernote client side but doesn't work as well..

Anyone had this problem?

server rendering breaks component. "TypeError: Cannot read property 'modal' of undefined"

I get "TypeError: Cannot read property 'modal' of undefined" when server rendering a component with this. the component's state has the wysiwyg not even open on load. but still wont render.

might work to hold off initializing summernote until it hits the componentDidMount hook. but I am just guessing at this without source diving.

how to set custom default attributes?

how to set fontSize, fontFamily etc as default styles?

shouldComponentUpdate

Hello! Thank you for great library!

But, please, do something with shouldComponentUpdate() {return false} in library.
hack doesn't work.

My component gets props from server, and I need to set default value to ReactSummernote.
What I do:

constructor(props) { super(props); this.state = { defaultValue: this.props.value || '' }; }

<ReactSummernote defaultValue={this.state.defaultValue} onChange={this.props.input.onChange} options={options} />

I tried to set shouldComponentUpdate={() => {}} property to ReactSummernote and it doesn't help me. I tried use valueinstead of defaultValue, and it alse doesn't help me.

So, I must delete shouldComponentUpdate() { return true; }
in source of library...

Can fail when multiple editors on one page

I have four editors on one page, some of them occasionally fail to display as the IDs clash

this.uid = `react-summernote-${Date.now()}`;

I'd suggest adding some random element, or making the uid customisable by the user to avoid this.

How to store image on server

i dont want to store image in database , Can anyone tell me how to store image on aws server, so that i can just store the url in database

Tag <del> instead of <strike>

Hi all. I have a question. Is that possible to change "Linethrough" tags from <strike> as it is at the moment to <del> by props or some configuration?

image upload doesn't work on WebView Javafx.

textarea can not focus ,can not input , safari

I want to know how to resolve .

Or tell me the implementation approach.
textarea diplay:none can foucs

npm package has not latest version

The replace functionality is not in the dist folder yet in the npm package.

No longer active?

Is this project dead? there hasn't been any updates in a long while?

Image upload doesn't work with redux

Hi

 <ReactSummernote
      value={this.props.currentPost.text}
         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.bind(this, "text")}
  />

Use the simple example. All text and inserts like tables and lists work good, but imageUpload, I mean base64 uploader doesn't work at all.

Could you help with this?
Thanks

How can i get Root component id?

react-summernote generates div element with uniс id attribute. Example react-summernote-94892, how can i get this id?

I want to use $(#id).summernote('saveRange')

React-Summernote too heavy (over 600kb)

After building my app using Webpack with production environment.
I found that react-summernote is the largest component (over 600kb) when summernote.min.js is around 94kb
....
react-summernote: 627.8 KB (18.2%)
react-dom: 507.97 KB (14.7%)
jquery: 260.93 KB (7.56%)
redux-form: 171.38 KB (4.97%)
react: 134.05 KB (3.88%)
lodash: 126.91 KB (3.68%)
....
Is this a big deal?

Cannot configure Webpack

In the installation instruction, configuration of Webpack is included:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})

Since manual Webpack configuration is not allowed in create-react-app boilerplate of Facebook, I tried using...
import $ from "jquery"
window.$ = $;
window.jQuery = $;
instead.
Yet still, dropdowns of buttons in the toolbar are not working. Any idea/solution for this?

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

Server Side Render failed

I try use @StanleySong solution(), But i get another error
`$node.attr(...).tooltip is not a function
TypeError: $node.attr(...).tooltip is not a function
at http://localhost:3002/_next/-/page/blog-release.js:89923:10
at Renderer.render (node_modules/react-summernote/dist/react-summernote.js:11815:0)
at http://localhost:3002/_next/-/page/blog-release.js:89867:17
at Array.forEach ()
at Renderer.render (node_modules/react-summernote/dist/react-summernote.js:11809:0)
at http://localhost:3002/_next/-/page/blog-release.js:93252:12
at Buttons.build (node_modules/react-summernote/dist/react-summernote.js:15688:0)
at Context.invoke (node_modules/react-summernote/dist/react-summernote.js:11736:0)
at Toolbar.initialize (node_modules/react-summernote/dist/react-summernote.js:15820:0)
at Context.initializeModule (node_modules/react-summernote/dist/react-summernote.js:11665:0)

in ReactSummernote (at ContentField.js:63)
in div (at ContentField.js:61)
in ContentField (at BlogReleaseLayout.js:88)
in form (at BlogReleaseLayout.js:64)
in div (at BlogReleaseLayout.js:63)
in div (at BlogReleaseLayout.js:62)
in div (at BlogReleaseLayout.js:60)
in div (at BlogReleaseLayout.js:58)
in div (at Layout.js:6)
in Layout (at BlogReleaseLayout.js:55)
in BlogReleaseLayout (at blog-release.js:385)
in BlogReleaseController (created by withRouter(BlogReleaseController))
in withRouter(BlogReleaseController) (created by App)
in Container (created by App)
in App
in AppContainer`
Who can help me?

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead

I have version ^2.0.0-rc.1 in my packages.json and everything works fine except this error message in the console.

Always failed to decode downloaded fonts.

Failed to decode downloaded font: http://localhost:3000/summernote.woff
create:1 OTS parsing error: invalid version tag
create:1 Failed to decode downloaded font: http://localhost:3000/summernote.ttf
create:1 OTS parsing error: invalid version tag

I used Meteor and React, and have no idea how to add ProvidePlugin. I skipped that and followed all other instructions. I don't know wether that step caused the error.

Multiple editors with image upload in a single page

Hey, I need multiple editors on a single page, but the Image Upload is not working.

For example If I have three editors, When I add an image in the first one or the second one, all of the uploaded images are display in the last editor. Is there a way to have multiple editors with image upload?

This is my code, I've tried to use it outside a component and the results are the same.

import React, { Component } from 'react';
import ReactSummernote from 'react-summernote';
export default class SummernoteEditor extends Component {

    /**
     * For some reason two modals appear when you init a SummernoteEditor
     * So just hide them
     */
    componentDidMount() {
        $(".note-link-popover").css('display', 'none');
        $(".note-image-popover").css('display', 'none');
    }

    onImageUpload = (fileList) => {
        const reader = new FileReader();
        reader.onloadend = () => {
            console.log(ReactSummernote);
            this.insertImage(reader.result);
        }
        reader.readAsDataURL(fileList[0]);
    }

    render() {
        return (
            <React.Fragment>
                <ReactSummernote
                    options={{
                        toolbar: [
                            ['style', ['style']],
                            ['font', ['bold', 'underline']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['table', ['table']],
                            ['insert', ['link', 'picture', 'video']],
                        ],
                    }}
                    onImageUpload={this.onImageUpload}
                />
            </React.Fragment>
        );
    }

}

use summernote-image-attributes with react-summernote ?

Hello,
I would like to be able to link an image to a particular url. Additional option in image popover.
Is it possible to integrate https://github.com/StudioJunkyard/summernote-image-attributes with react summernote?

Thanks.

Error decoding fonts using react-summernote in meteor

x54DuHKZzbRPWK8Cp:1 Failed to decode downloaded font: http://localhost:3000/bins/summernote.woff
x54DuHKZzbRPWK8Cp:1 OTS parsing error: invalid version tag
x54DuHKZzbRPWK8Cp:1 Failed to decode downloaded font: http://localhost:3000/bins/summernote.ttf
x54DuHKZzbRPWK8Cp:1 OTS parsing error: invalid version tag

Use library in React TSX

When try to use the TSX file as import ReactSummernote from 'react-summernote';

How can i create definition file for Summernote.jsx so that i dont get react-summernote module not found.

and where i need to place that file and code snippet for the d.ts file.

Thanks,

How can I bind a new event "removeMedia" with the delete button?

How Can I know that media added on summernote has been removed? (from delete button which we get when we click over the image OR when we press backspace)

Is React-Bootstrap supported?

Hello there,

Firstly, thanks for your hard work on this repository. I'm trying to use your plugin in an existing app.

• I'm having trouble getting WebPack 1.x to load both react-summernote and react-bootstrap.
  • The browser console lists the following error: TypeError: $node.attr(...).tooltip is not a function(…)

After inspecting the error the problem is in the summernote core where it defines the summernote.ui.button. I've tried importing the Tooltip module from react-boostrap in my app but that didn't work. It seems likely that my WebPack configuration is missing something. Do you have any suggestions?

Thanks much,
Matt

How to rest summernote

I uses ReactSummernote.reset()

but this result in an error

Uncaught (in promise) TypeError: Cannot read property 'summernote' of undefined(…)

Mp4 Videos duplicate on Enter Key Press

Hey Ivan Kitaev, loved your work dude.

Anyway there's a bug on summernote. It duplicates an mp4 video on enter key press after inserting it to summernote. Then the mp4 video can hardly be deleted after upload. But it works fine on youtube, dailymotion and etc.

Any ideas about this?anyway thanks man great work =)

how to get caret offset

Is there any method which can let us know the current offset of the caret

Use with Browserify `jQuery is not defined`?

How do I use this with Browserify? Getting a jQuery is not defined error.. although I've added jQuery

Toolbar button get active class after typing, not clicking

Hi all,

trying to use react-summernote in my project, everything seems to work good except one tiny problem. Once you click any toolbar button (bold/italic/...) the button doesn't get "active" class immediately. This class is added/removed only when user starts to type by

$note.on('summernote.keyup summernote.mouseup summernote.change', function () {
  context.invoke('buttons.updateCurrentStyle');
});

It works good on your demo page, theres a onClick handler method createInvokeHandlerAndUpdateState but in react-summernote is createInvokeHandler. Is this known issue? Will this be fixed any soon? Thanks :)

Can not using Link, Image, Video function

I can run summernote with other toolbar's function but Link, Image and Video function don't run (do nothing when I clicked on it). I think there are missing Bootstrap Javascript but when I import Bootstrap Javascript then it still not run.
Do you have any ideas?

Update Summernote

Would you please update react-summernote's dependency: summernote, right now we are not able to get access to functionalities which are made in summernote in the latest version.
Currently, react-summernote uses
summernote@^0.8.3: version "0.8.3"

So, please update to the latest: v0.8.11.

THANK YOU!

Disabled state

Hi!
I developing control panel of mail subscriptions and i have on some pages functionality of view content of letters which was sended. In this state all controls are disabled for edit but in ReactSummernote have not ways to control it.
Can you add props disabled={true|false}?
Also i think this functionality will be helpfully not only for me

Toolbar Dropdown Options and Image upload Not working

left alignment is invalid

Select a paragraph ,then set left alignment invalid.
But set the right alignment at first and then set the left alignment will works.
In the original site http://summernote.org/ set left alignment no problem,
this bug only appears in react-summernote.

Unmet Peer Dependency after [email protected] update

Hi,

I'm currently running npm build for my project. But it is failing due to React-Summernote requires Bootstrap. However, Summernote removed it on version 0.8.9.

[email protected] /home/lee/workspace/
├── UNMET PEER DEPENDENCY bootstrap@^3.3.6
├── UNMET PEER DEPENDENCY react-addons-transition-group@^0.14.0 || ^15.0.0
└─┬ [email protected] 
  ├── [email protected] 
  ├─┬ [email protected]
  │ └─┬ [email protected] 
  │   ├─┬ [email protected]
  │   │ └─┬ [email protected]
  │   │   └── [email protected] 
  │   └── [email protected] 
  └── [email protected] 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS:    darwin
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch:  any
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS:   linux
npm verb notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64
npm WARN [email protected] requires a peer of bootstrap@^3.3.6 but none was installed.

Can someone please help. Thank you!

Important merge

Hello!

Do you have a plans for including this merge-request?
summernote/summernote#2578

When this commits will included in react-summernote?

style and fontname doesnt work

toolbar: [
["style", ["style"]],
["fontname", ["fontname"]],
],

dropdown for style and selecting font style does'nt work..any ideas??thanks in advance =)
btw ur package was super helpful. thumbs up =)

Insert Row or Column into Table not available in react-summernote.

Insert Row or Column into Table not there in react-summernote.

But it's available in latest version of summernote-0.8.9.
Please refer http://jsfiddle.net/XavD/59renkv7/ to check the availability.

Can we have it in 'react-summernote' as well plz ?

Uncaught Error: Module parse failed: Unexpected character ''

I am trying to use react-summernote for our project, but cannot even run the simple sample follow README and some related issues. Below is my code and error content. Does anyone have any idea?
Thanks for your support.

1. Installed steps:

• npm install react-summernote

• npm install jquery

• npm install bootstrap

2. Usage

• RickTextEditor.jsx(define)

`import React, { Component } from 'react';
import $ from 'jquery';

window.$ = $;
window.jQuery = $;

import ReactSummernote from 'react-summernote';

import 'react-summernote/dist/react-summernote.css'; // import styles
import 'react-summernote/lang/summernote-ja-JP'; // 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';

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

render() {
return (
<ReactSummernote
value="Default value"
options={{
lang: 'ja-JP',
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}
/>
);
}
}`

• webpack.config.js (config)
  plugins: [ new webpack.DefinePlugin({ $: 'jquery', jQuery: 'jquery', }) ]

• XXX.jsx(usage)
  import { RichTextEditor } from '../../../RichTextEditor'; ............................................. <RichTextEditor />

• Error content (on browser)

jquery.js:10253 Uncaught Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) at Object.<anonymous> (jquery.js:10253) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.$.extend.ja-JP.font.bold (react-summernote.css:6) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.<anonymous> (react-summernote.css?d852:4) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.<anonymous> (RichTextEditor.jsx:8) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.defineProperty.value (Detail.jsx:16) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.defineProperty.value (New.jsx:4) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.defineProperty.value (Items.jsx:5) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19) at Object.defineProperty.value (Maker.jsx:4) at __webpack_require__ (bootstrap dddf0cbf45eda11341aa:19)

• Error content (on terminal)
  `ERROR in ./node_modules/react-summernote/dist/summernote.ttf
  Module parse failed: Unexpected character '' (1:0)
  You may need an appropriate loader to handle this file type.
  (Source code omitted for this binary file)
  @ ./node_modules/css-loader!./node_modules/react-summernote/dist/react-summernote.css 6:295-322
  @ ./node_modules/react-summernote/dist/react-summernote.css
  @ ./react/src/containers/maker/common/RichTextEditor.jsx
  @ ./react/src/components/maker/items/Detail.jsx
  @ ./react/src/containers/maker/items/New.jsx
  @ ./react/src/routes/maker/Items.jsx
  @ ./react/src/routes/maker/Maker.jsx
  @ ./react/src/routes/Main.jsx
  @ ./react/src/containers/App.jsx
  @ ./react/src/index.jsx

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842
@ ./node_modules/bootstrap/dist/css/bootstrap.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/react-summernote/dist/summernote.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/react-summernote/dist/react-summernote.css 6:236-264
@ ./node_modules/react-summernote/dist/react-summernote.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4622-4676
@ ./node_modules/bootstrap/dist/css/bootstrap.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4707-4760
@ ./node_modules/bootstrap/dist/css/bootstrap.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/react-summernote/dist/summernote.eot
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/react-summernote/dist/react-summernote.css 6:113-140 6:158-185
@ ./node_modules/react-summernote/dist/react-summernote.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4445-4497 6:4520-4572
@ ./node_modules/bootstrap/dist/css/bootstrap.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
|
|
@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4876-4928
@ ./node_modules/bootstrap/dist/css/bootstrap.css
@ ./react/src/containers/maker/common/RichTextEditor.jsx
@ ./react/src/components/maker/items/Detail.jsx
@ ./react/src/containers/maker/items/New.jsx
@ ./react/src/routes/maker/Items.jsx
@ ./react/src/routes/maker/Maker.jsx
@ ./react/src/routes/Main.jsx
@ ./react/src/containers/App.jsx
@ ./react/src/index.jsx`

How can I use summernote api in this react project?

I want to get the result user has input, and I have meet some trouble.
In summernote's doc, I can get the result by using $('#summernote').summernote('code');.
What should I do to get the same effect？Should I also import jQuery?
Thanks so much!!

ReferenceError: navigator is not defined, Meteor project

Hi,
I'm not using webpack, I have a meteor project where I am using react components. When I start up my app I get the following error:

W20161026-21:37:12.911(-5)? (STDERR) ReferenceError: navigator is not defined
W20161026-21:37:12.912(-5)? (STDERR)     at Object.<anonymous> (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:594:20)
W20161026-21:37:12.912(-5)? (STDERR)     at eq (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:229:229)
W20161026-21:37:12.913(-5)? (STDERR)     at Object.module.exports (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:237:3)
W20161026-21:37:12.914(-5)? (STDERR)     at __webpack_require__ (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:30:30)
W20161026-21:37:12.915(-5)? (STDERR)     at Object.<anonymous> (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:65:2)
W20161026-21:37:12.915(-5)? (STDERR)     at Object.module.exports (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:203:31)
W20161026-21:37:12.916(-5)? (STDERR)     at __webpack_require__ (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:30:30)
W20161026-21:37:12.916(-5)? (STDERR)     at Object.defineProperty.value (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:50:18)
W20161026-21:37:12.916(-5)? (STDERR)     at /Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:53:10
W20161026-21:37:12.917(-5)? (STDERR)     at webpackUniversalModuleDefinition (/Users/frederickwells/travelcollide/collide-travel/node_modules/react-summernote/dist/react-summernote.js:3:20)

Any idea how to get around this?

Table Popover is not working

Hi,

I'm using react-summernote in my application with the following configuration. I want to implement table add, remove column and row feature through popover functionality. I have added popover settings as given in documentation but somehow it is not reflecting any popover for the table. The following image will show more details of the issue

Expectation:

Current table not showing any popovers which are marked in yellow in the above image.

I'm using react-summernote: 2.0.0

<ReactSummernote
className="rich_text_global"
value={this.props.value.toString()}
onChange={this.props.onChange}
options={{
lang: 'en-EN',
height: 350,
insertTableMaxSize: {
col: 20,
row: 20
},
popover: {
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
},
dialogsInBody: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link']]

                    ]
                    
                }}

                />

Decouple from bootstrap dependencies

Hey there!

First off, great plugin. I'm using this in a production react app and I'm hoping to push this feature live.

1. I'm having trouble with bootstrap dependencies. I have these assets in our Rails app, and everything breaks when I render my standalone react app within that rails app. There's a conflict in Bootstraps (dropdown stop working, etc).

I'd like to remove the dependencies from of bootstrap from your module. How would you recommend me doing this?

1. With bootstrap 4 in (stable) alpha, you may want to add an option for this. Just a thought!

Thanks for your help.
Cheers!