Angular froala wysiwyg editor

Hi Readers,
In this blog, let’s learn how to integrate froala editor angular.

Angular froala wysiwyg editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications. In your application if you need to add editor in any form then froala editor is the best option for that.

To know more about the Form in angular then please refer this

To make use of Froala editor these are steps you need to follow

How to install froala wysiwyg editor

1: Install this package angular-froala-wysiwyg 

npm install angular-froala-wysiwyg

or refer this

2: include imports in your app.module.ts

import { FroalaEditorModule, FroalaViewModule } from ‘angular-froala-wysiwyg’;

imports: [

FroalaEditorModule.forRoot(),

FroalaViewModule.forRoot()

]

3: Add this to your angular.json

"styles": [

"styles.css",

"./node_modules/froala-editor/css/froala_editor.pkgd.min.css",

"./node_modules/froala-editor/css/froala_style.min.css",

]

4: The div where you need the Froala editor just add like below

<div class="editor">
  <div  [froalaEditor] [(froalaModel)]="htmlContent"></div>
</div>

In the above code [(froalaModel)] is working as [(ngModal)]

And the froala editor has integrated in your application now.

Print Data from froala wysiwyg editor

With the above code the angular froala wysiwyg editor starts working in your application, if you want to print the data from the editor then we can do that.

for that we need to added some html code to get data from the editor.

5: By using [(froalaModel)]=”htmlContent” we can get the data from editor.

<div class="editor-text">

<h3>Froala Editor Text</h3>

<div [innerHtml]="htmlContent"></div>

</div>

now let’s write something in the editor

now, we Installed the Froala editor, Initializing the editor, and Printing its Data

Conclusion

So, in this blog, we have gone through the introduction of froala editor in Angular. Next, we went through how we can install, integrate and get data from the editor in angular. To learn more about froala editor you can go through the official documentation here.

For more updates, please follow our LinkedIn page- FrontEnd Studio.

Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Feel free to share your thoughts about this blog in the comments.