https://github.com/summernote/react-summernote

Summernote (Super simple WYSIWYG editor) adaptation for react
https://github.com/summernote/react-summernote

react summernote

Last synced: about 1 month ago
JSON representation

Summernote (Super simple WYSIWYG editor) adaptation for react

• Host: GitHub
• URL: https://github.com/summernote/react-summernote
• Owner: summernote
• License: mit
• Created: 2016-06-27T21:39:23.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-21T13:22:33.000Z (7 months ago)
• Last Synced: 2024-04-13T21:56:47.096Z (3 months ago)
• Topics: react, summernote
• Language: JavaScript
• Homepage: http://summernote.org
• Size: 498 KB
• Stars: 223
• Watchers: 10
• Forks: 108
• Open Issues: 71
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-wysiwyg-editors - react-summernote - Summernote（超级简单的 WYSIWYG 编辑器）适应于 React。  (基于 React)
• awesome-summernote - react-summernote
• awesome-stars - summernote/react-summernote - Summernote (Super simple WYSIWYG editor) adaptation for react (JavaScript)
• awesome-humanscape - react-summernote - 위지윅 에디터 Summernote의 React wrapper (React, React Native / Components)

README

        
# react-summernote

[Summernote](https://github.com/summernote/summernote) adaptation for react (Headache free)

[![npm version](https://badge.fury.io/js/react-summernote.svg)](https://www.npmjs.com/package/react-summernote)

### Getting Started

#### Install

```

npm install react-summernote

```

#### Configure Webpack

Add ProvidePlugin to your webpack config

```javascript

new webpack.ProvidePlugin({

	$: "jquery",

	jQuery: "jquery"

})

```

### Example

```javascript

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 (

      

    );

  }

}

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

```javascript

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

```javascript

ReactSummernote.insertImage(`/resources/getImage?imageGuid=${image.imageGuid}`, $image => {

	$image.css("width", Math.floor($image.width() / 2));

	$image.attr("alt", image.name);

});

```