Froala Editor HTML Integration & Customization

Background:

We were developing Angular based website builder application, we needed a sophisticated WYSIWYG HTML Editor and after a bit of R&D and careful evaluation of available options for live content editing tools we finalized Froala Editor HTML because we needed an editor that provides super flexibility and customization support.

Froala Editor provides variety of options and customization support as well. Soon after we started using Froala, we were in need to customize it in such a way that it should allow us to integrate custom features. We have to create custom components instead of components provided by Froala. We used Froala events and methods to override Froala features and make it work with our custom features and components.

angular-froala-wysiwyg is the corresponding npm package to use in angular application.

Steps to install Froala Editor:

• You need to create account and subscribe to one of the available plans. Go to https://www.froala.com/wysiwyg-editor/pricing.
• After subscribing, you will get Froala license key. This key will be used later when using the froala editor html.
• Install angular-froala-wysiwyg npm package in your angular application using npm install angular-froala-wysiwyg –save command.
• Add path of Froala CSS and JavaScript files in angular config file (pacakge.json or angular.json)
• Add froala_editor.pkgd.min.css under styles array.
• Add froala_editor.pkgd.min.js under scripts array.
• Import FroalaEditorModule and FroalaViewModule in your app module (or a specific module where you need to use Froala Editor).
• Install font awesome in your project. Froala editor uses font awesome icons.

Note: If you do not buy Froala Editor, you can still use it but you will see unlicensed message at the left bottom corner of the editor.

Steps to Use Froala Editor HTML:

• Create a div and bind to properties provided by Froala.
• Bind to froalaModel. This is the data property where all your editing will be stored.
• Bind to froalaEditor. Use object that contains all config options for editor. Complete list of options are available at this link https://www.froala.com/wysiwyg-editor/docs/options
• You can also listen to events thrown by Froala using event listeners in options object. Complete list of events are available at this link https://www.froala.com/wysiwyg-editor/docs/events
• You will need to add the license key in key property in options object.

If you need to use Froala Editor heavily than its better to use a different approach:

• Use inheritance in TypeScript.
• Create parent class that handles creating and returning options object.
• Inherit from this base class where ever you need Froala Editor.

Customization:

• Custom Image library:

Froala Editor html provides its own image library. However, if you need to use custom image library here are the steps.

• Remove Froala Editor Image selection buttons from toolbar.
  • Create custom toolbar button. Here is how to do it https://www.froala.com/wysiwyg-editor/examples/custom-buttons
  • Open your own image library upon clicking the button from toolbar.
• Insert custom html

In order to insert custom UI elements i.e. buttons follow these steps.

• Create custom toolbar button.
  • Upon clicking use html.insert method provided by Froala. Pass desired html as parameter in the html.insert method.
• Custom pop-up
  • If you need to perform, some operation when specific UI element is clicked you can make use of click event listener.
  • o For instance when user clicks a button inside editor open up button editor pop-up/modal etc. You need to check if correct element is clicked by using click event listener.
• Error handling
  • Froala provide different events that you can use to plug your own code for custom error handling and logging.

You can also extend Froala Editor by including different plugins. For example for advance image editing you can use image TUI plugin. Complete list of available plugins can be found here https://www.froala.com/wysiwyg-editor/docs/plugins