Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Vnkitaev/react-summernote
Summernote (Super simple WYSIWYG editor) adaptation for react
https://github.com/Vnkitaev/react-summernote
react summernote
Last synced: 3 months ago
JSON representation
Summernote (Super simple WYSIWYG editor) adaptation for react
- Host: GitHub
- URL: https://github.com/Vnkitaev/react-summernote
- Owner: summernote
- License: mit
- Created: 2016-06-27T21:39:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T13:22:33.000Z (12 months ago)
- Last Synced: 2024-04-13T21:56:47.096Z (7 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
Awesome Lists containing this project
- awesome-wysiwyg - react-summernote - Summernote (Super simple WYSIWYG editor) adaptation for react. (For React)
- awesome-wysiwyg-editors - react-summernote - Summernote(超级简单的 WYSIWYG 编辑器)适应于 React。 ![github star](https://img.shields.io/github/stars/Vnkitaev/react-summernote.svg?style=social&label=Star) (基于 React)
- awesome-summernote - react-summernote
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);
});
```