Integrating Froala HTML Editor Software in Angular 19 With SSR Enabled

Froala has recently upgraded its Angular SDK to support Angular 19. With this update, developers can now integrate the Froala WYSIWYG Editor into their Angular 19 applications with server-side rendering (SSR) enabled. This allows for improved performance, better SEO, and enhanced user experience.

The updated SDK provides a seamless integration process, making it easier for developers to incorporate the feature-rich Froala Editor into their Angular projects. This integration enables users to create and edit content within the Angular application, while benefiting from the advantages of server-side rendering.

In this article, we will explore the step-by-step process of integrating the Froala WYSIWYG Editor into an Angular 19 application with server-side rendering enabled. We will cover the necessary setup, configuration, and implementation details to ensure a seamless integration. By the end of this guide, you will have a comprehensive understanding of how to leverage the power of Froala within your Angular 19 project.

Getting Started with Your Angular App

First, make sure you have the Angular CLI installed. The CLI is a powerful command-line tool that lets you create, develop, and manage Angular projects right from your terminal.

Don’t have the CLI installed yet? No problem, just run this command:

npm install -g @angular/cli

Now you’re ready to start building your Angular app. Let’s create a new project called “froala-app” by running:

ng new froala-app

You’ll be asked a couple of questions along the way:

1. Which stylesheet format would you like to use? Choose your preferred CSS preprocessor, like SCSS or Sass.
2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? This is an important one! Enabling SSR and SSG will make your Angular app more performant and SEO-friendly. Go ahead and type “Y” to turn it on.

Once you’ve answered these questions, an Angular project structure will be created in a new folder called “froala-app”. Navigate into the project directory using

cd froala-app

Install the Froala Angular SDK

Alright, let’s get the Froala Angular rich-text editor installed into your Angular application. The Froala Angular SDK has all the essential tools and components you need to easily integrate the Froala editor functionality into your Angular app.

Just run this command to get it installed:

npm install angular-froala-wysiwyg

Create a Standalone Component for Handling The Editor

Now, let’s create another component that we can use to integrate the Froala editor. We’ll call it the “my-editor” component.

ng generate component myEditor

This will create a new folder called “my-editor” inside the “src/app” directory. Inside you’ll find these files for the “my-editor” component:

• my-editor.component.css
• my-editor.component.html
• my-editor.component.spec.ts
• my-editor.component.ts

Import Froala Components

Open up the my-editor.component.ts file and let’s import the necessary Froala SDK components:

import { Component } from '@angular/core';

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




@Component({

  selector: 'app-my-editor',

  standalone: true,

  imports: [FroalaEditorModule, FroalaViewModule],

  templateUrl: './my-editor.component.html',

  styleUrl: './my-editor.component.css'

})

export class MyEditorComponent {}

Insert Froala Editor HTML Code

Now let’s add the Froala editor HTML code to the my-editor.component.html file:

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

Styling the Froala Editor

To make sure the Froala editor looks good, we need to include the necessary stylesheets. In the angular.json file, add these Froala stylesheets under the “styles” array:

            "styles": [

              "src/styles.css",

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

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

            ],

The froala_editor.pkgd.min.css includes the styles for the core editor and all Froala plugins. The froala_style.min.css includes the styles needed for displaying the content created by the editor outside the editor.

Displaying Froala on the main page

Finally, let’s import the MyEditorComponent into the app.component.ts file so we can use it in the main app template:

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterOutlet } from '@angular/router';

import { MyEditorComponent } from './my-editor/my-editor.component';




@Component({

  selector: 'app-root',

  standalone: true,

  imports: [CommonModule, RouterOutlet, MyEditorComponent],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

})

export class AppComponent {

  title = 'froala-app';

}

And in the app.component.html file, replace the main section with:

<main class="main">

  <div class="content">

    <app-my-editor></app-my-editor>

  </div>

</main>

Start your App

Alright, now you can serve the app by running ng serve. This will compile the application and serve it locally, usually at http://localhost:4200/. You can now open your Angular app in a web browser and you should see the Froala editor displayed on the homepage.

Displaying More Froala’s Features

You may have noticed that the Froala editor is displayed with just its basic features. That’s because we haven’t included the plugin’s JavaScript files in the ngOnInit() method yet. Let’s take care of that now.

Open up the “my-editor.component.ts” file and let’s start adding some Froala plugins one by one:

import { isPlatformBrowser } from '@angular/common';

import { Component, Inject, PLATFORM_ID } from '@angular/core';

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




@Component({

  selector: 'app-my-editor',

  standalone: true,

  imports: [FroalaEditorModule, FroalaViewModule],

  templateUrl: './my-editor.component.html',

  styleUrl: './my-editor.component.css'

})

export class MyEditorComponent {

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }




  ngOnInit() {

    // Import Froala plugins dynamically only in the browser context

    if (isPlatformBrowser(this.platformId)) {




      // Import a single Froala Editor plugin.

      // @ts-ignore

      import('froala-editor/js/plugins/align.min.js');




      // Import a Froala Editor language file.

      // @ts-ignore

      import('froala-editor/js/languages/de.js');




      // Import a third-party plugin.

      // @ts-ignore

      import('froala-editor/js/third_party/font_awesome.min');

      // @ts-ignore

      import('froala-editor/js/third_party/image_tui.min');

      // @ts-ignore

      import('froala-editor/js/third_party/spell_checker.min';

      // @ts-ignore

      import('froala-editor/js/third_party/embedly.min');

    }

  }

}

Alternatively, if you want to load all the Froala features with a single call, you can import the plugins.pkgd.js file instead:

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@Component({
  selector: 'app-my-editor',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './my-editor.component.html',
  styleUrl: './my-editor.component.css'
})
export class MyEditorComponent {
  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');

    }
  }
}

In the code above, we’re using the isPlatformBrowser component to make sure we only import the Froala plugins in the browser context. This is important for server-side rendering (SSR) scenarios.

The // @ts-ignore is used to suppress any TypeScript errors that might come up due to the dynamic import statements. This allows the code to compile without issues, and the plugins will be loaded at runtime.

How to Setup Froala if Server-side Rendering is disabled

If you’ve disabled server-side rendering (SSR) in your Angular application, the way you import the Froala SDK components may be a bit different. Instead of importing SDK components in my-editor.component.ts, we’ll update the my-editor.module.ts file as follows:

// Import all Froala Editor plugins.
// import 'froala-editor/js/plugins.pkgd.min.js';

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import a Froala Editor language file.
// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.
// import 'froala-editor/js/third_party/font_awesome.min';
// import 'froala-editor/js/third_party/image_tui.min';
// import 'froala-editor/js/third_party/spell_checker.min';
// import 'froala-editor/js/third_party/embedly.min';

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

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

Customizing The Editor

Now that we’ve set up the Froala editor in our Angular application, it’s time to start customizing it to fit our needs. We can enable additional features and plugins, adjust the toolbar buttons, and even create custom functionality.

The Froala SDK provides a wide range of options to tailor the editor to our specific requirements. By leveraging the power of Angular and the flexibility of Froala, we can build a robust and feature-rich text editing experience for our users.

Let’s open the my-editor.component.ts file and define a public options object in the MyEditorComponent class with some customizations from the Froala API options, events, and methods:

export class MyEditorComponent {

  public options: Object = {

    toolbarButtons: ['alignRight', 'bold', 'insertImage'],

    events: {

      'froalaEditor.contentChanged': function () {

        console.log('Content updated!');

      },

    },

  };

  .....

And in the my-editor.component.html file, we’ll assign the options object to the Froala component:

<div [froalaEditor]="options">Hello, Froala!</div>

Is it possible to store uploaded files in the cloud with Froala?

Absolutely! Froala offers two convenient ways for uploading files:

1. Built-in File Upload: Froala’s built-in file upload functionality seamlessly integrates with your Angular application, and you can configure it to upload files directly to your S3 bucket.
2. Filestack Integration: Froala also integrates with Filestack, a powerful upload and cloud storage solution. This integration gives you advanced file handling capabilities, allowing you to securely store and manage your application’s files. The Filestack integration streamlines the file upload experience within your Angular-powered app and offers easy integration with various cloud storage services.

The Filestack integration requires minimal configuration – you’ll need to create a Filestack account to get an API key.

Both options make it easy to incorporate file upload functionality into your Angular application, enhancing the content creation experience for your users.

Conclusion

In this article, we’ve explored the seamless integration of the Froala HTML Editor software into an Angular 19 application with server-side rendering (SSR) enabled. By leveraging the updated Froala Angular SDK, we were able to quickly set up the editor.

The step-by-step guide covered the necessary setup, configuration, and implementation details to ensure a smooth integration process. We also discussed how to customize the Froala editor to fit the specific needs of your Angular application including enabling additional features and plugins.

Moreover, we highlighted the two convenient options for storing uploaded files in the cloud – the built-in file upload functionality and the Filestack integration. Both of these solutions make it easy to incorporate secure and scalable file management into your Angular-powered application.

By following the instructions in this article, you now have the knowledge and tools to integrate the powerful Froala WYSIWYG Editor into your Angular 19 project, while taking advantage of the benefits of server-side rendering. Start enhancing your users’ content creation experience today!

Try Froala in your Angular 19 application and see the difference it can make. Get started with the Froala Angular SDK now.