HTML5 Editor Introduction

HTML5 Editor is an OZ functionality that allows user to edit a text label as if it was an HTML5 based document editor. This feature cannot be tested in the OZ Designer as it requires some thirdparty JS libraries. Therefore, it can be implemented and tested only by rendering the OZ Viewer in an HTML page. First, let us understand how to activate this feature by designing the form and creating an HTML page that renders it.

ACTIVATING THE FEATURE

The steps to follow to activate the feature are two:

1. On the designer, create a label and set the following parameters:

   1. "Drawing Type" parameter to "HTML"

   2. "Editable" parameter to "True"

   3. Set the "Horizontal Text Alignment" and "Vertical Text Alignment" parameters to "Left" and "Top" respectively

2. Create an HTML page rendering the form (for learning how to do so, please visit the "Day 3: Dynamic e-Form" section). Once the form is rendered, you will need to add the following statements to the HTML5 source code for the feature to work:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-ko-KR.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-ja-JP.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-zh-CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-zh-TW.min.js"></script>

<link rel="stylesheet" href="/html5viewer/HtmlEditor/summernote-ext-table.css" type="text/css"/>
<script type="text/javascript" src="/html5viewer/HtmlEditor/summernote-ext-table.js" charset="utf-8"></script>

Please, make sure that your html5viewer folder has the "HtmlEditor" folder in it. If not, contact FORCS team so they can provide you with that folder.

EDITING THE LABEL

Once the previous steps have been followed, the user will be able to edit the label element through HTML Editor. The user will need to:

1. Right-click on any point of the rendered form and select "edit tool"

2. Double click on the label component to edit

An editor window will popup where the user will be able to enter data.

Right-clicking on the rendered form and selecting "Edit Tool"

Double-clicking on the label to edit

HTML Editor appearing after double-click