react-summernote (Bootstrap 4 version for Ryfma.ru)
Summernote adaptation for react (Headache free)
Getting Started
Install
npm install react-summernote4
Configure Webpack
Add ProvidePlugin to your webpack config
$: "jquery" jQuery: "jquery"
Example
;;; // you can import any other locale ; // you should import bootstrap.css if you haven't done that before; // import styles Component { console; } { 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=thisonChange /> ; } ;
PropTypes
Property | Type | Description
:-----------------------|:--------------|:--------------------------------
value | String
| Default value
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
// Clear contents and remove all stored history // Insert a image // Insert a element or textnode // Insert a text
Example
ReactSummernote;