Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.2 is here – Learn More

Skip to content

The Future-Proof Angular Rich Text Editor

Feature-rich, easy-to-use, and highly customizable. It's built to future-proof your Angular app to grow as your business grow, making it the most powerful and flexible WYSIWYG rich text Angular editor available.

240+

API Options

40+

Plugins

100+

API Events

700+

Github Stars

220+

API Methods

35,000+

Weekly Downloads

40+

Plugins

35,000+

Weekly downloads

240+

API Option

100+

API Events

220+

API Methods

TRUSTED BY: Samsung Apple IBM Amazon Ebay Intel Salesforce Cisco Thomson Reuters

Reimagine Angular Editing with the
Angular Rich Text Editor

// Import helpers to detect browser context
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from "@angular/common";
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@Component({
  ...
  imports: [FroalaEditorModule, FroalaViewModule ... ],
  ...
})

export class AppComponent {
  ...
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    // Import Froala plugins dynamically only in the browser context
    if (isPlatformBrowser(this.platformId)) {
      // Import all Froala Editor plugins.
      // @ts-ignore
     import('froala-editor/js/plugins.pkgd.min.js');

    }
  }
  ...
}

Add Froala as your
Angular WYSIWYG editor

1 Install from NPM

npm install angular-froala-wysiwyg --save

2 Include the Stylesheets

open angular.json file and insert a new entry into the styles array
"styles": [
  "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "node_modules/froala-editor/css/froala_style.min.css",
]

3 Import the editor component & JS files

// Import helpers to detect browser context
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from "@angular/common";
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@Component({
  ...
  imports: [FroalaEditorModule, FroalaViewModule ... ],
  ...
})

export class AppComponent {
  ...
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    // Import Froala plugins dynamically only in the browser context
    if (isPlatformBrowser(this.platformId)) {
      // Import all Froala Editor plugins.
      // @ts-ignore
     import('froala-editor/js/plugins.pkgd.min.js');

    }
  }
  ...
}

4 Use the editor component

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

Why use Froala as your
Angular Rich Text Editor?

Thinking about integrating Froala into your Angular app?

Frequently Asked Questions

Froala Angular WYSIWYG editor is an Angular component that allows you to easily integrate and use the Froala WYSIWYG HTML rich text editor in your Angular applications.

Froala editor is a lightweight and customizable editor that offers many features, such as inline editing, image and video upload, file management, code view, and more. You can use Froala editor to create and edit rich text content for websites, blogs, emails, or other web-based applications.

Furthermore, Integrating Froala in Angular is easy and takes a few lines of code.

Of course! Take advantage of our free trial by downloading the Angular SDK package to test the Froala editor before buying. 

The trial is fully featured and for all functional purposes exactly the same as the licensed versions. However, you will notice a Froala attribution watermark and red ‘unlicensed’ banner that will be present on the editor until the purchase of a Froala license plan.

The Froala Angular WYSIWYG editor supports using the editor on several special HTML tags, including <img>, <button>, <input>, and <a>. This allows you to easily integrate the editor functionality with these common UI elements.

To use the editor on one of these special tags, add the [froalaEditor] component to the desired tag, like this:

<img [froalaEditor] [(froalaModel)]="imgObj"/>

In this example, the Froala editor is applied to an <img> element.

The froalaModel should be an object that contains the necessary attributes for the special tag. For example, with an <img> tag, the froalaModel object might look like this:

public imgObj: Object = {
  src: 'path/to/image.jpg'
};

This ensures that the image source and any other required attributes are properly set on the <img> element when the editor content is rendered.

You can follow a similar approach for the other supported special tags, such as <button>, <input>, and <a>.

For more details on using special tags with the Froala Angular WYSIWYG editor, be sure to check the official Angular SDK documentation.

To display content created with the froala editor use the froalaView directive.

[froalaView]="editorContent"

<div [froalaEditor] [(froalaModel)]="editorContent"></div>
<div [froalaView]="editorContent"></div>

 

The Froala Angular WYSIWYG Editor offers extensive customization options, allowing you to tailor the editor to your specific needs. You can modify the editor’s behavior and appearance by passing in a configuration object as a component attribute.

Here’s an example of how to customize the editor configuration:

<div [froalaEditor]='myConfig'>Hello, Froala!</div>

In the example above, the :config="myConfig" attribute is where you would pass in your custom configuration options. The myConfig object could look something like this:

public myConfig: Object = { toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'align'], heightMin: 200, heightMax: 500, placeholderText: 'Enter your content here...' }

The configuration options you can customize include the toolbar buttons, minimum and maximum editor height, placeholder text, and much more. You can find a full list of available options in the Froala API documentation

By customizing the editor configuration, you can ensure that the Froala Angular WYSIWYG Editor fits seamlessly into your application and provides the exact functionality your users need.

Fit in Any Kind of Angular Projects

Let Froala power your editing needs

Unlimited users and developers no matter which plan you choose. For any questions, contact us or checkout our Help Center

G2's top WYSIWYG editor for three years in a row

G2 Leader summer 2023
G2 Leader Fall 2023
G2 Leader winter 2023
G2 Leader spring_2024
G2 Leader summer 2024
G2 Leaded Fall 2024
G2 Leaded Winter 2024