// Import all Froala Editor plugins.// import 'froala-editor/js/plugins.pkgd.min.js';// Import a single Froala Editor plugin.// import 'froala-editor/js/plugins/align.min.js';// Import a Froala Editor language file.// import 'froala-editor/js/languages/de.js';// Import a third-party plugin.// import 'froala-editor/js/third_party/image_tui.min';// import 'froala-editor/js/third_party/spell_checker.min';// import 'froala-editor/js/third_party/embedly.min';// Import Angular2 plugin.import { FroalaEditorModule, FroalaViewModule } from'angular-froala-wysiwyg';
...
@NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot(), ... ],
...
})
open src/app/app.component.ts file and add to the template
<div [froalaEditor]>Hello, Froala!</div>
Run app
npmrun build
npmrun start
Usage
Options
Events and Methods
Model
Extend functionality
Special tags
Options
You can pass editor options as Input (optional).
[froalaEditor]='options'
You can pass any existing Froala option. Consult the Froala documentation to view a list available options:
public options: Object = {
placeholderText: 'Edit Your Content Here!',
charCounterCount: false
}
Aditional option is used:
* immediateAngularModelUpdate: (default: false). This option synchronizes the angular model as soon as a key is released in the editor. Note that it may affect performance.
Events and Methods
You can pass events with the options, with a key event and object where the key is the event name and the value is the callback function.
Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs.
Froala events are described in the events docs.
Model
The WYSIWYG HTML editor content model.
[(froalaModel)]="editorContent"
Pass initial content:
public editorContent: string = 'My Document\'s Title'
Use the content in other places:
<input [ngModel]="editorContent"/><input [(ngModel)]="editorContent"/><!-- For two way binding -->
Note: In order to use special tags in app.module.ts add
// Import all Froala Editor plugins. import 'froala-editor/js/plugins.pkgd.min.js';
You may also use the editor on img, button, input and a tags:
<img [froalaEditor] [(froalaModel)]="imgObj"/>
The model must be an object containing the attributes for your special tags. For example:
public imgObj: Object = {
src: 'path/to/image.jpg'
};
The froalaModel will change as the attributes change during usage.
froalaModel can contain a special attribute named innerHTML which inserts innerHTML in the element: If you are using ‘button’ tag, you can specify the button text like this:
public buttonModel: Object = {
innerHTML: 'Click Me'
};
As the button text is modified by the editor, the innerHTML attribute from buttonModel model will be modified too.
Specific option for special tags
angularIgnoreAttrs: (default: null) This option is an array of attributes that you want to ignore when the editor updates the froalaModel:
public inputOptions: Object = {
angularIgnoreAttrs: ['class', 'id']
};
Manual Initialization
Gets the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.
(froalaInit)="initialize($event)"
Where initialize is the name of a function in your component which will receive an object with different methods to control the editor initialization process.
