Tuesday, 15 June, 2021 UTC
Summary
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
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 <div id="froala-editor"> <p>The buttons below will destroy and init the rich text editor again.</p> </div> <p> <a id="btn-destroy" href="#" class="btn r-btn highlight text-small">Destroy</a> <a id="btn-init" href="#" class="btn r-btn text-small">Init</a> </p>
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
Conclusion:
btn-id selector to locate the dom element and attached a click event. Next, we used FroalaEditor to create a new object().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.
The post Froala Editor’s API Features & Example appeared first on Rest Api Example.