Ember JS

Ember JS Froala WYSIWYG Editor

GitHub

Compatibility

ember and ember-cli 2.4+


Breaking changes between v2.3.5 and v2.4.0!!!

Because the version of this addon aligns with the froala-editor version, we could not release a new major version "out-of-line". Please note the following breaking changes to the {{froala-editor}} component;

  • content is no longer updated by the editor, instead use an action to update the value. Ex:
    • From: {{froala-editor content=myProp}}
    • To: {{froala-editor content=myProp update=(action (mut myProp))}}
    • Alternate, "new" positional params option: {{froala-editor myProp (action (mut myProp))}}
  • options changed post-initialization no longer updates the editor, instead use the related froala-editor methods
  • Event handlers/actions on-*=(action) no longer receive an "event" object as the first arg, due to a change in event management. Change your action signatures;
    • From: function( eventObject, editorComponenet, ...params ){}
    • To: function( editorComponenet, ...params ){}
    • Similarly for the on-*-getHtml actions, but the eventObject is the second argument
  • contentBindingEvent option has been removed, in related to the above content change
  • defaultContent option has been removed, it was deemed unneeded and content is now set directly on the editor
  • Previously undocumented isSafeString option was renamed to returnSafeString

content mutation was removed because it better aligns with ember's direction for "data down, actions up" (similar to ember-one-way-controls). This and unmutable options also removed the need to maintain other complex state management.

Installation

ember install ember-froala-editor

Configuration

Take a look at the configuration documentation page for details on the exact configuration options. But basically you add 'ember-froala-editor':{} within your ember-cli-build.js file and adjust the available configuration options. Ex:

// ember-cli-build.js
// ... (snip)

  'ember-froala-editor': {
    plugins  : true,
    languages: ['es','fr','de'],
    themes   : 'royal'
  },

// ... (snip)

Usage

Take a look at the documentation Website for full usage details. But basically this addon comes with a few Ember Components and Helpers to use within your project templates.

{{froala-editor}}
{{froala-content}}
(froala-method)
(merged-hash)