Introduction

The Igloo platform utilizes Froala as a lightweight HTML WYSIWYG/code editor. Visit the Froala website for more information.

The editor also provides support for HTML code editing:

Instantiate Froala in a custom location

Basic

The following code will instantiate the editor with basic features:

/**
 * @description Textarea should be changed to the ID of the textarea element on your page
 */
Igloo.contentEditor(‘textarea’);

Advanced

The following code will instantiate the editor with the full option suite:

/**
 * @description Textarea should be changed to the ID of the textarea element on your page
 */
Igloo.contentEditor(‘textarea’, {
    editorType: 'advanced'
});

FAQs

Why are SCRIPT and FORM tags being stripped out?

SCRIPT and FORM tags are only supported in the HTML Content Widget (for reference, visit the article HTML Content Widget) and Footer ( visit the Footer page for guidance). 

My HTML is being stripped out after saving changes inside the editor

Upon committing changes to HTML code inside the Froala editor (Fig 1.2), the Igloo platform performs sanitization on the code. This is for the security of everyday use of the WYSIWYG editor by regular users and is based upon a whitelist of accepted HTML elements.

It is the best practice to only allow an Igloo Administrator to be able to Edit an HTML Content Widget, as it is naturally possible to bypass all of this in the front-end of the browser with JavaScript. This is because the SCRIPT tag is allowed for usage inside the HTML Content Widget.

<!-- Call a JavaScript file from the HTML Content Widget -->
<script src="/download/myapp/appjs" type="text/javascript"></script>

The above will call a script from the HTML Content Widget. Once that script is loaded into memory, there is no ability for the Igloo platform to control what happens within the window and document interface, and the developer will be able to do whatever they want, including using non-whitelisted HTML elements, etc:

/** 
 * @description Example contents of app.js called above. This will inject an <SVG> element onto the page. If you tried to type in an <SVG> element in the WYSIWYG editor, it would be removed.
 */
(function () {
    var docBody = document.getElementsByTagName('body')[0],
        customElement = document.createElement('svg');

    docBody.appendChild(customElement);
})();

Notes

A Developer may instantiate our platform WYSIWYG editor anywhere in a custom application on their Igloo site, and load it from our platform for convenience. However, this may not be desirable as our custom implementation of Froala is feature-locked.

If you require robust and complex features beyond the basic WYSIWIG features, the ability to trigger events, and set custom options, please take a look at implementing another popular 3rd-party web text editor:

*ACE - High Performance Code Editor for the web