{"id":13773590,"url":"https://github.com/vsymguysung/ember-cli-summernote","last_synced_at":"2025-12-17T04:46:09.315Z","repository":{"id":24255975,"uuid":"27649629","full_name":"vsymguysung/ember-cli-summernote","owner":"vsymguysung","description":"ember cli addon for summernote","archived":false,"fork":false,"pushed_at":"2019-02-06T03:30:57.000Z","size":997,"stargazers_count":31,"open_issues_count":7,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T17:11:23.400Z","etag":null,"topics":["addon","ember-cli-summernote","javascript","summernote"],"latest_commit_sha":null,"homepage":null,"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/vsymguysung.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}},"created_at":"2014-12-06T21:25:22.000Z","updated_at":"2019-08-09T08:44:19.000Z","dependencies_parsed_at":"2022-08-30T02:10:18.244Z","dependency_job_id":null,"html_url":"https://github.com/vsymguysung/ember-cli-summernote","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsymguysung%2Fember-cli-summernote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsymguysung%2Fember-cli-summernote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsymguysung%2Fember-cli-summernote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsymguysung%2Fember-cli-summernote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vsymguysung","download_url":"https://codeload.github.com/vsymguysung/ember-cli-summernote/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253523688,"owners_count":21921815,"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":["addon","ember-cli-summernote","javascript","summernote"],"created_at":"2024-08-03T17:01:17.613Z","updated_at":"2025-12-17T04:46:04.269Z","avatar_url":"https://github.com/vsymguysung.png","language":"JavaScript","funding_links":[],"categories":["Connectors"],"sub_categories":[],"readme":"# Ember-cli-summernote\n\n[![Build Status](https://travis-ci.org/vsymguysung/ember-cli-summernote.svg)](http://travis-ci.org/vsymguysung/ember-cli-summernote)\n[![NPM Downlaads](https://img.shields.io/npm/dm/ember-cli-summernote.svg)](https://www.npmjs.org/package/ember-cli-summernote)\n[![npm version](https://badge.fury.io/js/ember-cli-summernote.svg)](http://badge.fury.io/js/ember-cli-summernote)\n\n[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-summernote.svg)](http://emberobserver.com/addons/ember-cli-summernote)\n\n\n## Description\nEmber-cli-summernote is an Ember CLI add-on. This addon actually converts summernote to an Ember component which is\na re-usable unit. This is still a work in progress. Pull requests are welcome.\n\n\n[DEMO](http://vsymguysung.github.io/ember-cli-summernote/)\n\n## Installation\n```\n# install via npm\n$ npm install ember-cli-summernote --save-dev\n# make ember-cli fetch internal dependencies\n$ ember g ember-cli-summernote\n```\n\n## Basic Usage\n\n### Handlebar Template\n\nAs of version `1.1.0`, the addon embraces `DDAU`.\nThe `content` property is readonly and `onContentChange` action is used for updated contents.\n\n\n```javascript\nimport Ember from 'ember';\n\nexport default Ember.ObjectController.extend({\n  contentHeight: 200,\n  postContent: \"Some intial contents go here. Lorem Ipsum is simply dummy text of the printing.\",\n  editingDisabled: false,\n\n  actions: {\n    onContentChange(text) {\n      set(this, 'postContent', text);\n    },\n\n    changeHeight(someObject) {\n      let height = someObject.doSomeCalculationToGetHeight();\n      set(this, 'contentHeight', height)\n    }\n  }\n});\n```\n\n\nAs a result to follow `DDAU`, the summernote internall callback `onChange` will not be supported through the `callbacks` property in a consumming application.\n\n\n```handlebars\n\n{{summer-note height=contentHeight\n              btnSize=bs-sm\n              airMode=false\n              focus=false\n              header=\"Example\"\n              content=(readonly postContent)\n              onContentChange=(action 'onContentChange')\n              disabled=editingDisabled\n              callbacks=callbackOptions\n              toolbarOptions=toolbarOptions}}\n```\n\nExample of configuring the toolbar options.\n\n```javascript\n\n    toolbarOptions: {\n      style: false,\n      insert: {\n        picture: false\n      },\n      help: false\n    }\n```\n\n### Custom buttons usage ###\n\nIn hbs file\n```javascript\n    {{summer-note content=article customButtons=customButtons}}\n```\n\nIn controller file\n```javascript\n    import Ember from 'ember';\n\n    export default Ember.Controller.extend({\n        article: 'some text',\n        customButtons: [],\n\n        init() {\n\n            let _onNewBlock = this.get('onNewBlock').bind(this);\n\n            let newBlockButton = function (context) {\n                var ui = $.summernote.ui;\n\n                var button = ui.button({\n                    contents: '\u003ci class=\"fa fa-file-text-o\"/\u003e New div',\n                    tooltip: 'New div',\n                    click: _onNewBlock\n                });\n\n                return button.render();\n            }\n\n            this.customButtons.push(newBlockButton);\n\n        },\n\n        onNewBlock() {\n            let blocks = '\u003cdiv class=\"header\" id=\"headerBlock\"\u003e\u003c/div\u003e';\n            this.set('article', article + blocks);\n        }\n    });\n```\n\nAll callbacks except `onChange` are supported.\n\nThe `onChange` callback are used internally for the `onContentChange` action.\n\n```javascript\n    callbackOptions: {\n      onInit: function() {\n        console.log('Summernote is launched');\n      },\n      onEnter: function() {\n        console.log('Enter/Return key pressed');\n      },\n      onPaste: function(e) {\n        console.log('Called event paste');\n      },\n    },\n```\n\n### config/environment.js ###\nThe bootstrap resources will not be imported to your resources by default.\n\nAlso you can set `lang` option for the editor.\n\n```javascript\nvar ENV = {\n  modulePrefix: 'dummy',\n  environment: environment,\n  ...\n  'ember-cli-summernote': {\n    \"importBootstrapCSS\": true,\n    \"importBootstrapJS\": true,\n    \"lang\": \"en-US // \"ru-RU\" //\"lang\": \"en-US\"\n  }\n}\n\n```\n\n## Test Helper\n\nThis addon also provides a convenient test helper to interact with the editor\nin acceptance tests. \n\n```js\nfillInSummernote('.summernote-container', '\u003cp\u003eTest Text Entered.\u003c/p\u003e');\n\ngetContentFromSummernote('.summernote-container');\n```\n\n## Demo\nYou can clone this repo and run the app\n\n```\n$ sudo npm install -g ember-cli\n\n# clone the codebase\n$ git clone http://github.com/vsymguysung/ember-cli-summernote.git\n$ cd ember-cli-summernote\n\n# install dependencies\n$ npm install; bower install\n\n# fire up local server\n$ ember serve\n\n# visit the page with the following url.\nhttp://localhost:4200\n```\n\n\n#### Inspired by\n\n* Summernote(Super simple WYSIWYG Editor) (https://github.com/summernote/summernote) \n\n* Heather Brysiewicz's blog post (http://hbrysiewicz.github.io/2014-04-18-summernote-ember-wysiwyg.html)\n\n\n#### License\nMIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsymguysung%2Fember-cli-summernote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvsymguysung%2Fember-cli-summernote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsymguysung%2Fember-cli-summernote/lists"}