{"id":18307932,"url":"https://github.com/froala/ember-froala","last_synced_at":"2025-04-05T17:32:04.987Z","repository":{"id":57223793,"uuid":"41298354","full_name":"froala/ember-froala","owner":"froala","description":"[DEPRECATED] Please use https://github.com/froala/ember-froala-editor instead.","archived":false,"fork":false,"pushed_at":"2017-03-14T18:40:49.000Z","size":497,"stargazers_count":28,"open_issues_count":0,"forks_count":10,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-12-21T09:26:42.659Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://froala.com/wysiwyg-editor","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/froala.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":"2015-08-24T11:01:42.000Z","updated_at":"2018-06-06T18:02:07.000Z","dependencies_parsed_at":"2022-08-30T02:40:24.623Z","dependency_job_id":null,"html_url":"https://github.com/froala/ember-froala","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fember-froala","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fember-froala/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fember-froala/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fember-froala/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/ember-froala/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247374932,"owners_count":20928914,"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":[],"created_at":"2024-11-05T16:05:57.803Z","updated_at":"2025-04-05T17:32:04.102Z","avatar_url":"https://github.com/froala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-froala\n\n[![Join the chat at https://gitter.im/froala/ember-froala](https://badges.gitter.im/froala/ember-froala.svg)](https://gitter.im/froala/ember-froala?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\u003eEmber component for FroalaWysiwygEditor.\nFully customizable wysiwyg editor for emberjs. Create a new buttons and intergrate into your ember application. Post images images and html to your own server.\n\n## ADDON DEPRECATED!!!\n\nThis addon has been deprecated in favor of [ember-froala-editor](https://github.com/froala/ember-froala-editor).\n\n## Installation\n\n- `ember install ember-froala`\n- Copy fonts folder from `bower_components/font-awesome` and paste it into `public` folder\n\n## Example\n\nSee [demo app source](https://github.com/ajackus/ember-froala/tree/master/tests/dummy/app) for example usage.\n\n* Component example\n\n```javascript\nimport Ember from 'ember';\n\nexport default Ember.Component.extend({\n  value: 'test',\n\n  froalaEditor: {\n    params: {\n      toolbarInline: true,\n      placeholderText: 'Enter..'\n        // For more params refer: 'https://www.froala.com/wysiwyg-editor/docs/options'\n    },\n  },\n\n  actions: {\n  // For more events refer: 'https://www.froala.com/wysiwyg-editor/docs/events'\n    contentChanged: function(event, editor) {\n      console.log(\"Content Changed\");\n      console.log(event);\n      console.log(editor);\n    },\n    focus: function(event, editor) {\n      console.log(\"Focus\");\n      console.log(event);\n      console.log(editor);\n    },\n  },\n});\n```\n\n* Template example\n\n```hbs\n{{froala-editor params=froalaEditor.params value=value focus=(action \"focus\") contentChanged=(action \"contentChanged\")}}\n```\n\n**Mapping nested events**\nNested events use underscores to trigger their respective Froala events.\n\n - Nested Event example for image.uploaded\n   (https://www.froala.com/wysiwyg-editor/docs/events#image.uploaded)\n\n```hbs\n{{froala-editor params=froalaEditor.params image_uploaded=(action \"image_uploaded\")}}\n```\n\n - Nested Event example for imageManager.beforeDeleteImage\n   (https://www.froala.com/wysiwyg-editor/docs/events#imageManager.beforeDeleteImage)\n\n```hbs\n{{froala-editor params=froalaEditor.params imageManager_beforeDeleteImage=(action \"imageManager_beforeDeleteImage\")}}\n```\n\n### Concepts\n**Save button**\n\n - Template Example\n\n```hbs\n{{froala-editor params=froalaEditor.params value=value focus=(action \"focus\") contentChanged=(action \"contentChanged\")}}\n\u003cbutton {{action 'save'}}\u003eSave\u003c/button\u003e\n```\n\n* Component example\n\n```javascript\nimport Ember from 'ember';\n\nexport default Ember.Component.extend({\n  value: 'test',\n\n  froalaEditor: {\n    params: {\n      toolbarInline: true,\n      placeholderText: 'Enter..'\n        // For more params refer: 'https://www.froala.com/wysiwyg-editor/docs/options'\n    },\n  },\n\n  actions: {\n  // For more events refer: 'https://www.froala.com/wysiwyg-editor/docs/events'\n\tsave: function(){\n\t\tconsole.log(\"Content Saved\");\n\t\t$('.froalaEditor').froalaEditor('save.save');\n\t},\n    contentChanged: function(event, editor) {\n      console.log(\"Content Changed\");\n      console.log(event);\n      console.log(editor);\n    },\n    focus: function(event, editor) {\n      console.log(\"Focus\");\n      console.log(event);\n      console.log(editor);\n    },\n  },\n});\n```\n\n**Create custom button**\n\n - Template Example\n\n```hbs\n{{froala-editor params=froalaEditor.params  customButtons=froalaEditor.buttons}}\n```\n\n* Component example\n\n```javascript\nimport Ember from 'ember';\n\nexport default Ember.Component.extend({\n  value: 'test',\n\n  froalaEditor: {\n    params: {\n      toolbarInline: true,\n      placeholderText: 'Enter..',\n      toolbarButtons: ['my_dropdown','|', 'alert', 'clear', 'insert']\n        // For more params refer: 'https://www.froala.com/wysiwyg-editor/docs/options'\n    },\n    buttons:function(){\n\t\t\t$.FroalaEditor.DefineIcon('alert', {NAME: 'info'});\n      $.FroalaEditor.RegisterCommand('alert', {\n        title: 'Hello',\n        focus: false,\n        undo: false,\n        refreshAfterCallback: false,\n        callback: function () {\n          alert('Hello!');\n        }\n      });\n      $.FroalaEditor.DefineIcon('clear', {NAME: 'remove'});\n      $.FroalaEditor.RegisterCommand('clear', {\n        title: 'Clear HTML',\n        focus: false,\n        undo: true,\n        refreshAfterCallback: true,\n        callback: function () {\n          this.html.set('');\n          this.events.focus();\n        }\n      });\n      $.FroalaEditor.DefineIcon('insert', {NAME: 'plus'});\n      $.FroalaEditor.RegisterCommand('insert', {\n        title: 'Insert HTML',\n        focus: true,\n        undo: true,\n        refreshAfterCallback: true,\n        callback: function () {\n          this.html.insert('My New HTML');\n        }\n      });\n      $.FroalaEditor.DefineIcon('my_dropdown', {NAME: 'cog'});\n      $.FroalaEditor.RegisterCommand('my_dropdown', {\n        title: 'Advanced options',\n        type: 'dropdown',\n        focus: false,\n        undo: false,\n        refreshAfterCallback: true,\n        options: {\n          'v1': 'Option 1',\n          'v2': 'Option 2'\n        },\n        callback: function (cmd, val) {\n          console.log (val);\n        },\n        // Callback on refresh.\n        refresh: function ($btn) {\n          console.log ('do refresh');\n        },\n        // Callback on dropdown show.\n        refreshOnShow: function ($btn, $dropdown) {\n          console.log ('do refresh when show');\n        }\n      });\n    }\n  }\n});\n```\n\n### Please Note\nThe `value` is only for the initial value of the field.\nIt will not be updated when the user changes the text.\nIf the underlying value changes while the component is active, the editor will not reflect the change.\nIn order to get the values that the user changes, you will need to listen to the\n`contentChanged` action.\n\n* Including a plugin example:\n\nInclude the plugin in your ember-cli-build.js\n\n```javascript\n/* global require, module */\nvar EmberApp = require('ember-cli/lib/broccoli/ember-app');\n\nmodule.exports = function(defaults) {\n  var app = new EmberApp(defaults, {\n    // Add options here\n     emberFroala: {\n      fontAwesome: true,\n      theme: 'gray',\n      lang: 'en_us',\n      plugins: [\n        'block_styles',\n        'char_counter',\n        'colors', 'entities',\n        'file_upload',\n        'font_family',\n        'font_size',\n        'fullscreen',\n        'inline_styles',\n        'lists',\n        'media_manager',\n        'tables',\n        'urls',\n        'video'\n      ]\n    }\n  });\n\n  return app.toTree();\n};\n```\n\n## License\n\nThe `ember-froala` project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.\n\nFroala Editor has [3 different licenses](http://froala.com/wysiwyg-editor/pricing) for commercial use.\nFor details please see [License Agreement](http://froala.com/wysiwyg-editor/terms).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fember-froala","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fember-froala","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fember-froala/lists"}