New Froala Editor v4.5.2 is here – Learn More
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: 
Reimagine Angular Editing with the
Angular Rich Text Editor
SSR enabled
SSR disabled
// 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
SSR enabled
SSR disabled
// 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?
What our customers say
"Exceptional Editor with Unparalleled Support"
Using Froala Editor has been a game-changer for our team at the Autonomous University of Ciudad Juárez (UACJ). We primarily use Froala in our Annual Activity Report Platform and the Relevance and Feasibility Study Platform. The editor's ability to seamlessly integrate and maintain the formatting from Microsoft Word documents has significantly streamlined our content creation process. This feature alone has saved us countless hours and ensured the consistency and quality of our institutional reports. But what truly sets Froala apart is the outstanding support team. From the moment we integrated Froala into our platforms, their team has been there every step of the way, offering personalized, timely, and effective assistance. Whether it's resolving technical issues or simply providing guidance on best practices, their support has been nothing short of phenomenal. It's rare to find a product that excels both in functionality and in customer service, but Froala does just that. I highly recommend Froala to any team looking to enhance their content creation capabilities with a robust, user-friendly, and well-supported editor. Review collected by and hosted on G2.com. What do you dislike about Froala Editor? While Froala Editor is an excellent tool overall, there are a few minor challenges we've encountered. Occasionally, when copying and pasting larger segments of content, particularly those with images, from Microsoft Word, the formatting can be slightly disrupted. This has required us to paste content in smaller portions to maintain the desired layout. However, these issues are relatively minor compared to the many benefits Froala offers.
Cesar Alonso R.
23/08/2024
"Very easy to use and integrate, elegant text editor"
Ease of use. Great UI/UX. Intuitive. Easily integrated. Since we started using Froala several years ago it has been an integral part of our product offering. The Froala team, both implementation and customer support have been great to work with. It's one of the mosed used features on our platform. Review collected by and hosted on G2.com. What do you dislike about Froala Editor? In the past we've had issues with the table editor, but I haven't too many if any issues about that recently.
Jeromy W.
07/02/2024
"Solid Editor"
The customization possible with the editor is a very nice feature that allows the editor to be incorporated into many different scenarios. It can be as full-featured as you want or a very simple text input. Review collected by and hosted on G2.com. What do you dislike about Froala Editor? We have been using the Froala editor for a while now and I have yet to hit anything that I really dislike.
Verified User in Computer Software
18/04/2023
"Super easy to use and good and quick support"
The editor is easy to implement and features a full sweet of functions needed in our application. What do you dislike about Froala Editor? There we're a few issues while implementing it. (bugs known and unknown) most of them are fixed at the time of writing.
Tim H.
02/03/2023
"Froala is a wonder"
I feel it's one of the most powerful and best javascript editors so far in the market.inatialization speed is 40se which is pretty amazing and the security is outstanding. What do you dislike about Froala Editor? No downsides as such.I did not face any major issues with using it.Its practically AMAZING. What problems is Froala Editor solving and how is that benefiting you? It has a rich editing interface that allows users to see what the end result will look like.
Navya R.
17/10/2022
"Froala Neoris"
What do you like best about Froala Editor? Is very intesresting. Really is the best component that I found. What do you dislike about Froala Editor? For now all is good. I will let you know if i found any issue. What problems is Froala Editor solving and how is that benefiting you? The tool is very complete to get our meets our expectations.
Jesús G.
22/01/2022
"Lightweight, easy to implement, and concise UI."
What do you like best about Froala Editor? Complete free test, embedding the video's handling of the element is the state I want, there is also a toolbar for RWD. What do you dislike about Froala Editor? I can't make good use of the "saveParams" parameter. In my structure, it is not convenient to bring in variables. If the function returns, it may be solved. What problems is Froala Editor solving and how is that benefiting you? An easy-to-use editor, especially for images and videos.
柏融 .
08/08/2022
"Good editor, good support"
What do you like best about Froala Editor? The UX of the editor is really good with lot of functionnalities What do you dislike about Froala Editor? Pricing is a bit high for one year license What problems is Froala Editor solving and how is that benefiting you? Having editor inside my product
Victor S.
22/07/2022
"Best web solutions tool"
What do you like best about Froala Editor? Entire structure is very user-friendly a What do you dislike about Froala Editor? Nothing major that's a dislike. great experience using soft What problems is Froala Editor solving and how is that benefiting you? Makes it very easy to make changes to the entire website changes so quick
FARAZ H.
30/05/2022
"Painless integration"
What do you like best about Froala Editor? The Froala Editor is a solid solution for the final user and developer friendly, it just works, but what I like the most was the integration with our React-based development, this was the main concern and initially planned to build it from scratch, I can say waved a lot of time. What do you dislike about Froala Editor? We spent a lot of time with the look & feel customization but at this point is working well, no complaints yet, but have to say that we are not in a production environment yet, at this moment is still under development, maybe later I can come back with more comments. 😉 What problems is Froala Editor solving and how is that benefiting you? We have a lot of customers that want to customize and personalize our dashboards, I mean business people not necessarily developers, so with this component, we add value to our business solution. Response from Carl Cruz of Froala Editor Hey there! Thanks for your review. We appreciate the time and effort you took into customizing Froala and are excited to see what you can create with Froala.
Alejandro M.
11/08/2022
Frequently Asked Questions
What is Froala's Angular WYSIWYG editor?
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.
Why should you choose Froala Angular rich text editor?
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.
Can I try the Froala editor before I buy it?
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.
What are special tags?
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.
How can I display content created with the froala editor?
To display content created with the froala editor use the froalaView directive.
[froalaView]="editorContent"
<div [froalaEditor] [(froalaModel)]="editorContent"></div>
<div [froalaView]="editorContent"></div>
How can I customize the Froala Vue editor configuration?
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
Content Management Systems (CMS)
Enhance the content management capabilities of your CMS in Angular with the incorporation of the Froala WYSIWYG editor, transforming the editing process for pages and blog posts.
Learning Management Systems (LMS)
Advance your Learning Management Systems (LMS) in Angular with MathType integration, delivering a new level of accuracy and professionalism.
Email Marketing Systems
Effortlessly craft email content for your Email Marketing Systems using the Froala Angular WYSIWYG editor, guaranteeing output code that's compatible with mail clients.
Customer Relationship Management (CRM)
Transform your Angular CRM strategy with a cutting-edge rich-text WYSIWYG editor that brings a host of innovative features to the table, revolutionizing your customer relationship management.
SaaS and
Internal Applications
Enhance your SaaS application's capabilities with a robust editor.
Document Management System
Develop Angular applications with capabilities akin to Microsoft Word and Google Docs, empowering your document management system.
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
