On the root of your project you need to create a new folder called config and place inside 2 files:copy.config.js & sass.config.js". These files can be copied to new config folder from node_modules/@ionic/app-scripts/config/{{name_of_file}}.js
Modify the copied files. In sass.config.js add the reference to font-awesome, verify that you have something similar to this:
/**
* includePaths: Used by node-sass for additional
* paths to search for sass imports by just name.
*/
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'node_modules/font-awesome/scss' // <------ Newly added.
],
In copy.config add this before copyAssets property:
copyFroalaEditorCss: {
src: '{{ROOT}}/node_modules/froala-editor/css/froala_editor.pkgd.min.css',
dest: '{{SRC}}/assets/'
},
copyFontAwesome: {
src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
dest: '{{SRC}}/assets/'
},
copyFontsAwesomeFonts: {
src: 'node_modules/font-awesome/fonts/*',
dest: '{{WWW}}/fonts/'
},
copyAssets: { //<-------- this should be last.
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
}
You should have the files in your {{ROOT}} and {{WWW}} folders ready for further development.
The last step is to add in file src/theme/variables.css:,
@import "font-awesome";
Refrence the new scripts on your view html file and everything should work fine.
open src/app/app.component.ts and add to the template
<div [froalaEditor]>Hello, Froala!</div>
[only if you're using AOT] open rollup-config.js and add the following
//paths are relative to the execution path
export default {
...
plugins: [
...
commonjs({
include: [
'node_modules/rxjs/**',
'node_modules/angular2-froala-wysiwyg/**'
]
}),
...
]
}
[only if you're using AOT] Compile
ngc -p tsconfig-aot.json && rollup -c rollup-config.js
Run app
npm run start
Usage
Options
You can pass editor options as Input (optional).
[froalaEditor]='options'
You can pass any existing Froala option. Consult the Froala documentation to view the list of all the 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 performances.
Events and Methods
Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.
If you want to wrap froalaEditor directive into a component that supports reactive forms please see froala.component.ts from demo.
Special tags
You can 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. 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.
The angular2-froala-wyswiyg project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.
