{"id":44524977,"url":"https://github.com/scompiler/ngx-summernote","last_synced_at":"2026-02-13T17:57:49.208Z","repository":{"id":57747046,"uuid":"521900091","full_name":"scompiler/ngx-summernote","owner":"scompiler","description":"Summernote editor for Angular :sunglasses:","archived":false,"fork":false,"pushed_at":"2025-11-01T22:05:12.000Z","size":2545,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-23T14:08:01.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"lula/ngx-summernote","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scompiler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-08-06T09:17:02.000Z","updated_at":"2025-11-01T22:05:16.000Z","dependencies_parsed_at":"2023-02-09T03:16:00.128Z","dependency_job_id":null,"html_url":"https://github.com/scompiler/ngx-summernote","commit_stats":{"total_commits":111,"total_committers":12,"mean_commits":9.25,"dds":0.5045045045045045,"last_synced_commit":"cfbcb3bd8b2e4bec43364711e19279cdba16b506"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scompiler/ngx-summernote","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scompiler%2Fngx-summernote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scompiler%2Fngx-summernote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scompiler%2Fngx-summernote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scompiler%2Fngx-summernote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scompiler","download_url":"https://codeload.github.com/scompiler/ngx-summernote/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scompiler%2Fngx-summernote/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29414277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-02-13T17:57:48.503Z","updated_at":"2026-02-13T17:57:49.197Z","avatar_url":"https://github.com/scompiler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxSummernote\n\n[Summernote](https://github.com/summernote/summernote) editor for Angular :sunglasses:\n\n## Installation\n\nInstall ngx-summernote and dependencies:\n\n`npm install --save ngx-summernote summernote jquery`\n\nCompatibility:\n\n| Angular | ngx-summernote |\n|---------|----------------|\n| 20      | 0.20.x         |\n| 19      | 0.19.0         |\n| 18      | 0.18.0         |\n| 17      | 0.17.0         |\n| 16      | 0.15.1         |\n| 15      | 0.12.0         |\n| 14      | 0.8.8          |\n| 12      | 0.8.5          |\n| 11      | 0.8.4          |\n| 10      | 0.8.x          |\n| 9       | 0.7.x          |\n| 8       | 0.7.x          |\n| 7       | 0.6.x          |\n| 6       | 0.5.4          |\n\n## Editor\n\nAdd JQuery and Summernote scripts and styles to the angular.json file:\n\n```json5\n{\n  \"styles\": [\n    // ...\n    \"node_modules/summernote/dist/summernote-lite.min.css\"\n  ],\n  \"scripts\": [\n    // ...\n    \"node_modules/jquery/dist/jquery.min.js\",\n    \"node_modules/summernote/dist/summernote-lite.min.js\"\n  ]\n}\n```\n\nAdd NgxSummernoteModule to the app.module.ts file OR to the subcomponent module.ts file if using lazy loading:\n\n```\n...\nimport { NgxSummernoteModule } from 'ngx-summernote';\n...\n@NgModule({\n...\n  imports: [\n    ...\n    NgxSummernoteModule\n    ...\n  ]\n})\nexport class AppModule { }\n```\n\nUse `[ngxSummernote]` directive on an element to init Summernote editor:\n\n```html\n\u003cdiv [ngxSummernote]\u003e\u003c/div\u003e\n```\n\nYou may also configure Summernote with your own config:\n\n```html\n\u003cdiv [ngxSummernote]=\"config\"\u003e\u003c/div\u003e\n```\n\n```typescript\nexport class AppComponent implements OnInit {\n  // ...\n  config = {\n    placeholder: '',\n    tabsize: 2,\n    height: '200px',\n    uploadImagePath: '/api/upload',\n    toolbar: [\n        ['misc', ['codeview', 'undo', 'redo']],\n        ['style', ['bold', 'italic', 'underline', 'clear']],\n        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],\n        ['fontsize', ['fontname', 'fontsize', 'color']],\n        ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],\n        ['insert', ['table', 'picture', 'link', 'video', 'hr']]\n    ],\n    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']\n  }\n  // ...\n}\n```\n\nSee Summernote available initialization options [here](https://summernote.org/deep-dive/#initialization-options).\n\n## Viewer\n\nUse `[ngxSummernoteView]` directive on an element to set innerHTML of an element:\n\n```html\n\u003cdiv [ngxSummernoteView]=\"content\"\u003e\u003c/div\u003e\n```\n\n## Upload images to server\n\nIf you want to upload images to server and use remote paths in editor, you need to set `uploadImagePath` option in config:\n\n```javascipt\nconfig = {\n  uploadImagePath: 'http://example.com/upload' // API URL to upload image\n};\n```\n\nAPI call response is expected to be like:\n\n```javascript\n{\n  path: 'the path of the image' // http://example.com/image-path.png\n}\n```\n\nIf the reponse does not follow the above structure then the image is inserted as data URL.\n\nTo remove images from server when deleted from HTML, use `(mediaDelete)`:\n\n```html\n\u003cdiv [ngxSummernote] (mediaDelete)=\"onDelete($event)\"\u003e\u003c/div\u003e\n```\n\n```typescript\nonDelete(file) {\n  deleteResource(file.url);\n}\n```\n\n## Add custom button\n\nIn your component setup summernote `config` and code for the custom button, e.g.:\n\n```typescript\nfunction customButton(context) {\n  const ui = $.summernote.ui;\n  const button = ui.button({\n    contents: '\u003ci class=\"note-icon-magic\"\u003e\u003c/i\u003e Hello',\n    tooltip: 'Custom button',\n    container: '.note-editor',\n    className: 'note-btn',\n    click: function() {\n      context.invoke('editor.insertText', 'Hello from test btn!!!');\n    }\n  });\n  return button.render();\n}\n\nexport class AppComponent implements OnInit {\n  config: any = {\n    // ...\n    buttons: {\n      'testBtn': customButton\n    }\n  };\n  // ...\n}\n```\n\nSee detailed info on custom buttons [here](https://summernote.org/deep-dive/#custom-button).\n\n## Development\n\nTo use the test application, first build the lib:\n\n```\nng build ngx-summernote\n```\n\nThen serve the test application and open it in your browser:\n\n```\nnpm start\n```\n\n## Contributors\n- [Ishan Mahajan](https://github.com/ishan123456789)\n- [NickShcherba](https://github.com/shcherbanikolay)\n- [Mathis Hofer](https://github.com/hupf)\n- [James Manners](https://github.com/jmannau)\n- [Tim Börner](https://github.com/tim-boerner)\n- [Jason K.](https://github.com/lonerzzz)\n- [Elle](https://github.com/LuigiElleBalotta)\n\n## Release Preparation\n\n- Change version:\n  - projects/ngx-summernote/package.json\n  - package.json\n- Add new version to compatibility table in README.md\n- Build package. Run command ``npm run build:lib``.\n- Publish package. Run command ``npm publish`` from ``dist/ngx-summernote`` directory.\n- Make git commit.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscompiler%2Fngx-summernote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscompiler%2Fngx-summernote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscompiler%2Fngx-summernote/lists"}