(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Froala Editor Integration & Customization
Jan 22
Froala-Editor-Integration-&-Customization

Froala Editor Integration & Customization

  • January 22, 2020

Background:

We were developing Angular based website builder application, we needed a sophisticated WYSIW​YG HTML Editor and after a bit of R&D and careful evaluation of available options for live content editing tools we finalized Froala Editor 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.
  • 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:

  • 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 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

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com