ember-froala-editor

Ember Froala Editor Addon

Bring the Froala WYSIWYG Editor into an ember-cli project with this addon. Besides importing the required Froala Editor files, the main part of this addon is the {{froala-editor}} component. Checkout the documentation Website for installation, configuration, and usage details.

Compatibility

ember and ember-cli 2.3+

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

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)

Development

• git clone this repository (fork if you plan on submitting a PR)
• npm install
• bower install

Running Docs Server

• ember server
• Visit the docs at http://localhost:4200

Running Tests

• npm test (Runs ember try:testall to test against multiple Ember versions)
• ember test
• ember test --server
• ember server (Visit tests at http://localhost:4200/tests)

Releasing

Notes to self really...

1. If bumping the froala-wysiwyg-editor version, update both bower.json and blueprints/ember-froala-editor/index.json
2. npm version x.y.z - Updates the version in package.json and tags in git
3. git push origin master - Pushes any changes up to Github
4. git push origin --tags - Pushes the new version tag to Github
5. Update the new tag on the Github Releases page
6. npm run deploy - Deploys the docs to gh-pages using ember-cli-github-pages

• May need to git push, deploy will say if this is needed

1. git checkout master - Need to switch back to master after deploying the docs..
2. npm publish - Release the new version to the world!

For more information on using ember-cli, visit http://ember-cli.com/.

License

The ember-froala-editor project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

Froala Editor has 3 different licenses for commercial use. For details please see License Agreement.