Quill Rich Text Editor

Description

This widget provides a Rich Text Editor for your applications.

Prerequisites

The widget comes preloaded with the required JavaScript libraries and css stylesheets.

JavaScript Libraries
jQuery version 3.2.1
quill.min.js version 1.3.6

CSS
quill.snow.css version 1.3.6

The widget has been designed using the supplied bootstrap version 4 presentation template.
If this template is removed you must provide a link to jQuery 3.2.1 or later.

Installation

Drag the widget from the Widgets View onto the page. This will add the UI element of the widget to the page and also create the following directory structure in the Installed Widgets Project:

Installed Widgets
  InstalledWidgets
    QuillRichTextEditor_{version}
      {formName}_{widgetPrefix}QuillRichTextEditor
        Scripts
          configure

Configuration

The configure server-side script in the Installed Widgets project contains the following functions:
config : configures the toolbar options and placeholder text
loadEditor: loads the editor with values sourced from widget field control 'saved'
saveEditor: saves the editor contents to widget field control 'saved'
e.g.

function loadEditor()
{
   var data = ''
   if(fields.saved.value)
   {
      data = fields.saved.value;
   }
   else
   {
      data = '';
   }
   return data;
}

function saveEditor(editorContent)
{
   fields.saved.value = editorContent;
}

How it works

This widget uses the quilljs library.
The display of the QuillRichTextEditor is activated using a jQuery ready event defined on the HTML Element Properties of the QuillRichTextEditor Panel Control. As distributed, the QuillRichTextEditor will load and display each time the page is displayed.
To change this to display the QuillRichTextEditor as a result of a user action, mark the QuillRichTextEditor Panel Control as
hidden and then show it using server-side Javascript e.g.

controls.{prefix}QuillRichTextEditor.show();

All options that affect the way in which the editor behaves are configured in the config() function of the server-side configure script.
The editor can be prepopulated from the loadEditor() function of the server-side configure script.
When the user saves their content or when the form is closed the saveEditor() function of the server-side configure script is called.
As distributed the widget both loads and saves its content into a field control called 'saved' in the widget context.
To save the contents outside of the widgets context see the Additional Notes below.

Additional Notes

The config(), loadEditor() and saveEditor() functions run in the context of the widget.
To address elements in the form, all script references must be prefixed with "form." e.g.

function loadEditor()
{
	var data = ''
	if(form.fields.documentContent.value)
	{
		data = form.fields.documentContent.value;
	}
	else
	{
		data = '';
	}
	return data;
}

function saveEditor(editorContent)
{
	form.fields.documentContent.value = editorContent;
}

The 3rd party Quill rich text editor library attempts to add inline style to some elements. If CSP is turned on without the unsafe-inline keyword, the browser will refuse to apply the style and issue an error message to the log. The style that isn't applied doesn't appear to have any major impact on the functionality of this widget.

You can avoid these error messages by turning off CSP or by adding unsafe-inline to your policy.