Angular 1 plugin for the Froala WYSIWYG HTML Editor is also available.

You will need CSS styles

Integration

Use with Angular CLI

Installing @angular/cli

Note: you can skip this part if you already have application generated.

npm install -g @angular/cli ng new my-app cd my-app

Add angular-froala-wysiwyg

install angular-froala-wysiwyg

npm install angular-froala-wysiwyg

open src/app/app.module.ts and add

// Import Angular plugin. import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg' ; ... @NgModule({ ... imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ], ... })

open angular.json file and insert a new entry into the styles array

"styles" : [ "styles.css" , "./node_modules/froala-editor/css/froala_editor.pkgd.min.css" , "./node_modules/froala-editor/css/froala_style.min.css" , ]

in angular.json file insert a new entry into the scripts array

"scripts" : [ "./node_modules/froala-editor/js/froala_editor.pkgd.min.js" ]

open src/app/app.component.html and add

< div [ froalaEditor ]> Hello, Froala! </ div >

Run angular-cli

ng serve

Use with ionic v2 or v3

Create Ionic app

Note: you can skip this part if you already have application generated.

npm install -g cordova ionic ionic start myApp blank cd myApp

Add angular-froala-wysiwyg

For v3 make sure that you use the latest version of ionic and also the latest version of angular.

Installing Froala Wysiwyg Editor in Ionic is fairly easy, it can be done using npm: bash npm install angular-froala-wysiwyg --save - open src/app/app.module.ts and add

import "froala-editor/js/froala_editor.pkgd.min.js" ; import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg' ; ... ({ ... imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ], ... })

open src/app/main.ts and add

In package.json add the following:

"config" : { "ionic_copy" : "./config/copy.config.js" }

Run the following commands

mkdir config cp node_modules/ @ionic /app-scripts/config/copy.config.js ./config/

Open config/copy.config.js file and add the following at the beginning of module.exports

module . exports = { copyFroalaEditorCss: { src: [ '{{ROOT}}/node_modules/froala-editor/css/froala_editor.pkgd.min.css' , '{{ROOT}}/node_modules/froala-editor/css/froala_style.min.css' ], dest: '{{BUILD}}' }, ... }

Open src/index.html file and add in the <head> tag:

< link rel = "stylesheet" href = "build/froala_editor.pkgd.min.css" > < link rel = "stylesheet" href = "build/froala_style.min.css" >

In your desired view add the Froala Editor like this:

< div [ froalaEditor ]> Hello, Froala! </ div >

Run your App

ionic serve

Use with webpack

Create webpack app

Note: you can skip this part if you already have application generated.

git clone --depth 1 https://github.com/AngularClass/angular-starter.git cd angular-starter npm install

Add angular-froala-wysiwyg

install angular-froala-wysiwyg

npm install angular-froala-wysiwyg

open src/app/app.module.ts and add

import "froala-editor/js/froala_editor.pkgd.min.js" ; import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg' ; ... ({ ... imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot(), ... ], ... })

open src/app/app.component.ts and add to the template

< div [ froalaEditor ]> Hello, Froala! </ div >

open config/webpack.common.js and add the following to CopyWebpackPlugin

{ from : 'node_modules/froala-editor/css/' , to: 'assets/froala-editor/css/' , },

open config/head-config.common.js and add a new entry to link

{ rel : 'stylesheet' , href: '/assets/froala-editor/css/froala_editor.pkgd.min.css' }, { rel : 'stylesheet' , href: '/assets/froala-editor/css/froala_style.min.css' }

Run webpack app

npm run start

Use with angular-seed

Create angular-seed app

Note: you can skip this part if you already have application generated. For more details please also read: https://github.com/mgechev/angular-seed.

git clone --depth 1 https://github.com/mgechev/angular-seed.git cd angular-seed npm install

Add angular-froala-wysiwyg

install angular-froala-wysiwyg

npm install angular-froala-wysiwyg

open tools/config/project.config.ts file and uncomment the following line from the top of the file

import { ExtendPackages } from './seed.config.interfaces' ;

in tools/config/project.config.ts file add

... this .NPM_DEPENDENCIES = [ ... this .NPM_DEPENDENCIES, { src: 'froala-editor/js/froala_editor.pkgd.min.js' , inject: 'libs' }, { src: 'froala-editor/css/froala_editor.pkgd.min.css' , inject: true }, { src: 'froala-editor/css/froala_style.min.css' , inject: true } ]; ... let additionalPackages: ExtendPackages[] = [ { name: 'angular-froala-wysiwyg' , path: 'node_modules/angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd.min.js' }, { name: 'angular-froala-wysiwyg/*' , path: 'node_modules/angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd.min.js' } ] this .addPackagesBundles(additionalPackages);

open src/client/app/home/home.module.ts and add

// Import Angular2 plugin. import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg' ; ... @NgModule({ ... imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ], ... })

open src/client/app/home/home.component.html and add

< div [ froalaEditor ]> Hello, Froala! </ div >

Run webpack app

npm run start

Use with system.js and JIT

Create Angular app

Note: you can skip this part if you already have application generated.

git clone https://github.com/angular/quickstart.git angular-quickstart cd angular-quickstart npm install

Add angular-froala-wysiwyg

install angular-froala-wysiwyg

npm install angular-froala-wysiwyg

open src/index.html and add

< link rel = "stylesheet" href = "node_modules/froala-editor/css/froala_editor.pkgd.min.css" > < link rel = "stylesheet" href = "node_modules/froala-editor/css/froala_style.min.css" > < script src = "node_modules/froala-editor/js/froala_editor.pkgd.min.js" > </ script >

open src/app/app.module.ts and add

// 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 >

open src/systemjs.config.js file and add to map

map : { ... 'angular-froala-wysiwyg' : 'npm:angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd.js' , ... }

< div [ froalaEditor ]> Hello, Froala! </ div >

​

Run app

npm run start

Use with aot

Create Angular app

Note: you can skip this part if you already have application generated.

git clone https://github.com/angular/quickstart.git angular-quickstart cd angular-quickstart npm install

Install additional dependencies. Make sure that there is no UNMET PEER DEPENDENCY.

npm install @angular/compiler-cli @angular/platform- server npm install rollup rollup - plugin -node-resolve rollup - plugin -commonjs rollup - plugin -uglify npm install lite- server

Copy scr/tsconfig.json to a new file called tsconfig-aot.json in the root of the project, then modify it as follows.

{ "compilerOptions" : { "target" : "es5" , "module" : "es2015" , "moduleResolution" : "node" , "sourceMap" : true , "emitDecoratorMetadata" : true , "experimentalDecorators" : true , "lib" : [ "es2015" , "dom" ], "noImplicitAny" : true , "suppressImplicitAnyIndexErrors" : true , "typeRoots" : [ "./node_modules/@types/" ] }, "files" : [ "src/app/app.module.ts" , "src/main.ts" ], "angularCompilerOptions" : { "genDir" : "aot" , "skipMetadataEmit" : true } }

Create a configuration file ( rollup-config.js ) in the project root directory to tell Rollup how to process the application.

import nodeResolve from 'rollup-plugin-node-resolve' ; import commonjs from 'rollup-plugin-commonjs' ; import uglify from 'rollup-plugin-uglify' ; export default { entry : 'src/main.js' , dest : 'src/build.js' , sourceMap: false , format : 'iife' , onwarn : function ( warning ) { if ( warning.code === 'THIS_IS_UNDEFINED' ) { return ; } console .warn( warning.message ); }, plugins : [ nodeResolve({ jsnext : true , module : true }), commonjs({ include : 'node_modules/rxjs/**' , }), uglify() ] };

Update src/main.ts file for AOT:

import { platformBrowser } from '@angular/platform-browser' ; import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory' ; console .log( 'Running AOT compiled' ); platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Add angular-froala-wysiwyg

install angular-froala-wysiwyg

npm install angular-froala-wysiwyg

open src/index.html and add

< link rel = "stylesheet" href = "node_modules/froala-editor/css/froala_editor.pkgd.min.css" > < link rel = "stylesheet" href = "node_modules/froala-editor/css/froala_style.min.css" > < script src = "node_modules/froala-editor/js/froala_editor.pkgd.min.js" > </ script >

open src/app/app.module.ts and add

// 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 >

open rollup-config.js and add the following

export default { ... plugins: [ ... commonjs({ include : [ 'node_modules/rxjs/**' , 'node_modules/angular-froala-wysiwyg/**' ] }), ... ] }

Run app

node_modules/.bin/ngc -p tsconfig-aot.json node_modules/.bin/rollup -c rollup-config.js -c rollup-config.js lite-server