Froala Editor’s API Features & Example

RestAPIExample Team Uses of Rest API

This rest API tutorial uses an example to demonstrate the key features of Froala Editor. We’ll make a froala-editor client and gain access to his events and methods.

The Froala Editor is a Next-Generation WYSIWYG HTML Editor. It’s a Javascript online editor that’s simple for developers to integrate, and your users will adore its clean look.

How To Get API Key

The API key for Froala’s interface with Codox. Your Wave account can provide you with a key. The activation instructions for Froala Editor can be found here. When the editor is first initialized, the created activation key should be given as the key option.

How To Initialize Froala Editor

The sample code for initialize editor’s by JavaScript (V2 & V3):

new FroalaEditor('your_selector', {key: "ACTIVATION_KEY"}

The API can be used to configure and customize FroalaEditor in the following ways:

  • API – Options
  • API – Methods
  • API – Events

There are following Popular & common method available:

  • Destroy / Init editor
  • Get Edited HTML
  • Insert HTML Button
  • Live Code Preview
  • Live Content Preview
  • Save / Restore Selection

How To Get Edited HTML Data

You can use at any time in your code the following snippet to get the content inside the Froala WYSIWYG HTML Editor. You need to add the below js code into your js file to get entered HTML code.

let editor = new FroalaEditor('div#froala-editor', {}, function () { 
 console.log(editor.html.get())});

How to Initialize and Destroy Editor using API

We can destroy FroalaEditor using destroy method.

//The HTML code


  
The buttons below will destroy and init the rich text editor again.










  Destroy
  Init

The javascript Code:

var editor = new FroalaEditor('div#froala-editor')

// Destroy action.
document.querySelector('a#btn-destroy').addEventListener('click', function (e) {
e.preventDefault();

 if (editor) {
editor.destroy()
}
});

We can also initialize froala editor, The following code help to initialize again froala-editor:

// Initialize action
var editor = new FroalaEditor('div#froala-editor')
document.querySelector('a#btn-init').addEventListener('click', function (e) {
e.preventDefault();
if (!editor) {
editor = new FroalaEditor('div#froala-editor')
}
})

As you can see from the code above, We used the btn-id selector to locate the dom element and attached a click event. Next, we used FroalaEditor to create a new object().

Conclusion:

We have explored froala Editor APIs using an example. I also demonstrate a new instance of Editor using API, how to destroy Editor object. There are a lot of events and methods available, You can explore more API features of Froala Editor.