Ember-froala
Ember component for FroalaWysiwygEditor. Fully customizable wysiwyg editor for emberjs. Create a new buttons and intergrate into your ember application. Post images images and html to your own server.
ADDON DEPRECATED!!!
This addon has been deprecated in favor of ember-froala-editor.
Installation
ember install ember-froala
- Copy fonts folder from
bower_components/font-awesome
and paste it intopublic
folder
Example
See demo app source for example usage.
- Component example
; Component;
- Template example
{{froala-editor params=froalaEditor.params value=value focus=(action "focus") contentChanged=(action "contentChanged")}}
Mapping nested events Nested events use underscores to trigger their respective Froala events.
- Nested Event example for image.uploaded (https://www.froala.com/wysiwyg-editor/docs/events#image.uploaded)
{{froala-editor params=froalaEditor.params image_uploaded=(action "image_uploaded")}}
- Nested Event example for imageManager.beforeDeleteImage (https://www.froala.com/wysiwyg-editor/docs/events#imageManager.beforeDeleteImage)
{{froala-editor params=froalaEditor.params imageManager_beforeDeleteImage=(action "imageManager_beforeDeleteImage")}}
Concepts
Save button
- Template Example
{{froala-editor params=froalaEditor.params value=value focus=(action "focus") contentChanged=(action "contentChanged")}}<button {{action 'save'}}>Save</button>
- Component example
; Component;
Create custom button
- Template Example
{{froala-editor params=froalaEditor.params customButtons=froalaEditor.buttons}}
- Component example
; Component;
Please Note
The value
is only for the initial value of the field.
It will not be updated when the user changes the text.
If the underlying value changes while the component is active, the editor will not reflect the change.
In order to get the values that the user changes, you will need to listen to the
contentChanged
action.
- Including a plugin example:
Include the plugin in your ember-cli-build.js
/* global require, module */var EmberApp = ; module { var app = defaults // Add options here emberFroala: fontAwesome: true theme: 'gray' lang: 'en_us' plugins: 'block_styles' 'char_counter' 'colors' 'entities' 'file_upload' 'font_family' 'font_size' 'fullscreen' 'inline_styles' 'lists' 'media_manager' 'tables' 'urls' 'video' ; return app;};
License
The ember-froala
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.