Using Multiple Froala Editors On a Single Webpage

Browser with a text editor showing the Froala Inline Editor Demo page bolding the title.

Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications and provides users with customizable features and parameters that can be tweaked to suit their specific needs. For example, buttons, dropdowns, pop-ups, icon shortcuts, and other features can be quickly customized based on your preferences. Or how about creating multiple Froala editors on one webpage, each with their own unique features and without affecting the editing experience? Sounds interesting?

In this article, we’ll look at how to do this in a few easy steps. With multiple Froala editors on a single webpage, you can even drag and drop images from one editor to another!

Step 1: 

Include Froala Editor CSS and JS File under the Resources section:

https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css

https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

A detailed view of a web editor interface with a focus on design elements

Step 2: 

Add the HTML code of the editor multiple times at your desired places on the page.

The HTML code of multiple editors should be a unique ID. Here we have:

<div id=”froala-editor1”> and <div id=”froala-editor2”>

A complex web editor interface with multiple tools and options

Step 3: 

Add the Javascript code of the editor including editor1 and editor2.

A web editor interface showing text formatting options and toolbar

Step 4: 

Customize the editors with different toolbars by including toolbarButtons option.

A web editor interface with image editing tools and options

 

Try it out in JSFiddle

https://jsfiddle.net/t7bw4j20/1/

 

See it in Action

Try Froala Editor

Unlock the rich editing capabilities of the modern WYSIWYG Editor

Posted on March 12, 2020

Kirti Joshi

Kirti Joshi is an expert technical writer focusing on JavaScript WYSIWYG HTML Editors.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published.

    Hide Show