WYSIWYG HTML Editor | Froala Upload Multiple Images using angular

WYSIWYG HTML Editor with angular

WYSIWYG HTML Editor is really amazing and cool. Really easy to integrate with existing code with little effort.

We will be focusing on

• Quick Integration of Editor with Angular.
• How about font setup and default?
• Transformation/convert images into Base64 and bug fixes.
• GitHub Link 🚀

Quick Integration of Editor with Angular

we can make in just a couple of steps

npm install angular-froala-wysiwyg --save

Now go to “src/app/app.module.ts” and includes

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


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

Add styles inside angular.json

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

Wow, we are ready. Just place the following code where we want to render the editor, e.g “app.component.html”. Ins’t it cools !

<div [froalaEditor]> I'm Ready</div>

Initial view of editor

Awesome! If you look at editor, we don't have enough options on the toolbar. Don’t worry, we will deal with it. I’m sharing enough imports that sufficient our need. Add the following imports to “app.module.ts”

import "froala-editor/js/plugins.pkgd.min.js";
import "froala-editor/js/plugins/image.min.js";
import "froala-editor/js/plugins/word_paste.min.js";
import "froala-editor/js/plugins/table.min.js";
import "froala-editor/js/plugins/font_size.min.js";
import "froala-editor/js/plugins/line_breaker.min.js";
import "froala-editor/js/plugins/line_height.min.js";
import "froala-editor/js/plugins/lists.min.js";
import "froala-editor/js/plugins/paragraph_format.min.js";
import "froala-editor/js/plugins/quote.min.js";
import "froala-editor/js/plugins/special_characters.min.js";

For more detail, checkout the link Froala Plugin

Editor view after adding imports

We can further customize the view using configuration object to froala editor as in “app.component.html”

<div [froalaEditor]="froalaOptions" >I'm Ready</div>

and in “app.component.ts”

public options: Object = {
  placeholderText: 'Edit Your Content Here!',
  charCounterCount: false
}

To check all the available options, checkout the link Froala Options

With above configuration, we found a lot toolbar options like upload image or multiple images, inset video link.

Video and images insertion into editor

How about font and default ?

In order to set custom fonts like

Let's straightly forwardly follows

1. Add Google fonts to your index.html

index.html

2. Place font_family.min.js import to your target module

//  app.module.ts
import "froala-editor/js/plugins/font_family.min.js";

3. Update your’s frolaOptions JSON Object as:

// inside app.component.ts
public froalaOptions: Object = {
    fontFamily: {
      "'Source Serif Pro', serif": 'Source Serif Pro',
      'Roboto,sans-serif': 'Roboto',
      'Oswald,sans-serif': 'Oswald',
      'Montserrat,sans-serif': 'Montserrat',
      "'Open Sans Condensed',sans-serif": 'Open Sans Condensed',
    },
    fontFamilyDefaultSelection: 'Source Serif Pro',
    fontFamilySelection: true,
 };
//inside app.component.html
// and your html will look like, at this point
// <div [froalaEditor]="froalaOptions" >I'm Ready</div>

wonderfull, finally you will end up with this, as “source sarif Pro” will be set as default: Love it 🥰

Transformation/convert images into Base64 and bug fixes.

At this stage, we have a pretty cool editor is in functional state. We can upload images single or multiple as much we want. If you're wondering from where we can upload images or files, look at following

Insert files option

After enabling, you will get

Insert files enable

So drag and drop or select the multiple files, we will end up with view

Multi files selection

Check the checkboxes and insert the images into the editor.

Superb, we are good to Go

Limitation of inserted images looks worthless

Looks worried. Seems like the image the useless now. That there is no way we can use them for example in scenario of if we want to render the content of editor as PDF view, then these images will no longer display

Stop! Have a look. When we inspect the images, It found to be of blob type.

Images of type blob is showing in the inspect mode

Crack the solution:

Yeah! Let’s set up an event “image.beforeUpload” upon froala options JSON. So in that function we will write a function that will convert the upload image into base64 🤓

public froalaOptions: Object = {
    // fontFamily: {
    //   "'Source Serif Pro', serif": 'Source Serif Pro',
    //   'Roboto,sans-serif': 'Roboto',
    //   'Oswald,sans-serif': 'Oswald',
    //   'Montserrat,sans-serif': 'Montserrat',
    //   "'Open Sans Condensed',sans-serif": 'Open Sans Condensed',
    // },
   events: {
      'image.beforeUpload': function (files: any) {
        let editor: any = this;
        if (files.length) {
          let currentImage = editor.image.get();
          var reader = new FileReader();
          reader.onload = function (e: any) {
            var result = e.target.result;
            editor.image.insert(result, null, null, currentImage);
          };
          reader.readAsDataURL(files[0]);
        }
        editor.popups.hideAll();
        return false;
      },
      'image.error': function (error: any) {},
    },
  };

Remember, I kept the fontFamily key object there, so you understand it’s at equal level with events.

Important ⚠️ Above code is updated version, it handles the problem of duplicating images that comes up while upload multiple images. That you will face if you use the code provided on offical site.

GitHub Link 🚀

GitHub - mabdullahse/WYSIWYG-HTML-Editor-Froala-Upload-Multiple-Images-using-angular: WYSIWYG HTML…

Thank you so much 👏 for being with me through the whole journey. Your clap will rally matter for me 💖