{"id":14653526,"url":"https://github.com/hackerwins/react-summernote","last_synced_at":"2025-04-06T03:10:23.281Z","repository":{"id":9443609,"uuid":"62090161","full_name":"hackerwins/react-summernote","owner":"hackerwins","description":"Summernote (Super simple WYSIWYG editor) adaptation for react","archived":false,"fork":false,"pushed_at":"2023-11-21T13:22:33.000Z","size":510,"stargazers_count":232,"open_issues_count":72,"forks_count":109,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-30T07:42:39.039Z","etag":null,"topics":["react","summernote"],"latest_commit_sha":null,"homepage":"http://summernote.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hackerwins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-27T21:39:23.000Z","updated_at":"2024-10-11T10:15:35.000Z","dependencies_parsed_at":"2024-06-18T13:45:19.749Z","dependency_job_id":"b452f536-a8bf-4e51-af4d-e47a41dfc537","html_url":"https://github.com/hackerwins/react-summernote","commit_stats":{"total_commits":38,"total_committers":14,"mean_commits":"2.7142857142857144","dds":0.4736842105263158,"last_synced_commit":"bbc014681e9bf0430542ac96c199352004a6884a"},"previous_names":["vnkitaev/react-summernote","hackerwins/react-summernote"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackerwins%2Freact-summernote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackerwins%2Freact-summernote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackerwins%2Freact-summernote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackerwins%2Freact-summernote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackerwins","download_url":"https://codeload.github.com/hackerwins/react-summernote/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","summernote"],"created_at":"2024-09-11T08:00:51.697Z","updated_at":"2025-04-06T03:10:23.251Z","avatar_url":"https://github.com/hackerwins.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-summernote\n[Summernote](https://github.com/summernote/summernote) adaptation for react (Headache free)\n\n[![npm version](https://badge.fury.io/js/react-summernote.svg)](https://www.npmjs.com/package/react-summernote)\n\n\n### Getting Started\n\n#### Install\n\n```\nnpm install react-summernote\n```\n\n#### Configure Webpack\n\nAdd ProvidePlugin to your webpack config\n\n```javascript\nnew webpack.ProvidePlugin({\n\t$: \"jquery\",\n\tjQuery: \"jquery\"\n})\n```\n\n### Example\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactSummernote from 'react-summernote';\nimport 'react-summernote/dist/react-summernote.css'; // import styles\nimport 'react-summernote/lang/summernote-ru-RU'; // you can import any other locale\n\n// Import bootstrap(v3 or v4) dependencies\nimport 'bootstrap/js/modal';\nimport 'bootstrap/js/dropdown';\nimport 'bootstrap/js/tooltip';\nimport 'bootstrap/dist/css/bootstrap.css';\n\nclass RichTextEditor extends Component {\n  onChange(content) {\n    console.log('onChange', content);\n  }\n\n  render() {\n    return (\n      \u003cReactSummernote\n        value=\"Default value\"\n        options={{\n          lang: 'ru-RU',\n          height: 350,\n          dialogsInBody: true,\n          toolbar: [\n            ['style', ['style']],\n            ['font', ['bold', 'underline', 'clear']],\n            ['fontname', ['fontname']],\n            ['para', ['ul', 'ol', 'paragraph']],\n            ['table', ['table']],\n            ['insert', ['link', 'picture', 'video']],\n            ['view', ['fullscreen', 'codeview']]\n          ]\n        }}\n        onChange={this.onChange}\n      /\u003e\n    );\n  }\n}\n\nexport default RichTextEditor;\n```\n\n### PropTypes\n\n|  Property  |  Type  |  Description  |\n|------------|--------|---------------|\n| value | `String` | Default value |\n| codeview | `Boolean` | Option to render in codeview mode |\n| options | `Object` | Options object. More info about options http://summernote.org/deep-dive |\n| onInit | `Function` | Being invoked when summernote is launched |\n| onEnter | `Function` | Enter/Return button pressed |\n| onFocus | `Function` | Editable area receives the focus |\n| onBlur | `Function` | Editable area loses the focus |\n| onKeyDown | `Function` | `e.keyCode` is pressed |\n| onKeyUp | `Function` | `e.keyCode` is released |\n| onPaste | `Function` | Triggers when event paste's been called |\n| onChange | `Function` | handler: `function(contents, $editable) {}`, invoked, when content's been changed |\n| onImageUpload | `Function` | handler: `function(files) {}` |\n\n### Static methods\n\n```javascript\nreset() // Clear contents and remove all stored history\ninsertImage(url, filenameOrCallback) // Insert a image\ninsertNode(node) // Insert a element or textnode\ninsertText(text) // Insert a text\n```\n\n##### Example\n\n```javascript\nReactSummernote.insertImage(`/resources/getImage?imageGuid=${image.imageGuid}`, $image =\u003e {\n\t$image.css(\"width\", Math.floor($image.width() / 2));\n\t$image.attr(\"alt\", image.name);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackerwins%2Freact-summernote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackerwins%2Freact-summernote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackerwins%2Freact-summernote/lists"}