Form Editor

Release 2.15.0 and above.

A form element editor plugin that can insert form elements and edit their properties.

How to Use

Loading Plugin Files

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of formEditor.min.js"></script>
<link rel="stylesheet" href="url of formEditor.min.css">

Adding Buttons to the Toolbar

You can add form element insert, properties dialog, and edit buttons to the toolbar area or the menu area.

Add to Toolbar

// synapeditor.config.js
//...
'editor.toolbar': [
    // Form element insert buttons
    'formEditor_text', 'formEditor_textarea', 'formEditor_select',
    'formEditor_radio', 'formEditor_checkbox', 'formEditor_button',
    'formEditor_hidden', 'formEditor_datalist', 'formEditor_fieldset', 'formEditor_form'
    //...
],
// ...

Form Element Insert Button List

KEY	ICON	Description
formEditor_text		Inserts a text field. (<input type="text">)
formEditor_textarea		Inserts a text area. (<textarea>)
formEditor_select		Inserts a select box. (<select>)
formEditor_radio		Inserts a radio button. (<input type="radio">)
formEditor_checkbox		Inserts a checkbox. (<input type="checkbox">)
formEditor_button		Inserts a button. (<button>)
formEditor_hidden		Inserts a hidden field. (<input type="hidden">)
formEditor_datalist		Inserts a data list. (<datalist>)
formEditor_fieldset		Inserts a fieldset. (<fieldset>)
formEditor_form		Inserts a form. (<form>)

Properties Button List

KEY	ICON	Description
formEditor_textProperties		Opens the dialog to set text field properties.
formEditor_textareaProperties		Opens the dialog to set text area properties.
formEditor_selectProperties		Opens the dialog to set select box properties.
formEditor_radioProperties		Opens the dialog to set radio button properties.
formEditor_checkboxProperties		Opens the dialog to set checkbox properties.
formEditor_buttonProperties		Opens the dialog to set button properties.
formEditor_hiddenProperties		Opens the dialog to set hidden field properties.
formEditor_datalistProperties		Opens the dialog to set data list properties.
formEditor_datalistInputProperties		Opens the dialog to set data list field properties.
formEditor_labelProperties		Opens the dialog to set label properties.
formEditor_fieldsetProperties		Opens the dialog to set fieldset properties.
formEditor_formProperties		Opens the dialog to set form properties.

Form Element Edit Button List

KEY	ICON	Description
formEditor_bold		Applies 'Bold' to the selected form element.
formEditor_italic		Applies 'Italic' to the selected form element.
formEditor_underline		Applies 'Underline' to the selected form element.
formEditor_strike		Applies 'Strikethrough' to the selected form element.
formEditor_fill		Applies 'Fill color' to the selected form element.
formEditor_borderColor		Applies 'Border color' to the selected form element.
formEditor_lineThickness		Applies 'Line thickness' to the selected form element.
formEditor_lineStyle		Applies 'Line style' to the selected form element.
formEditor_fontFamily		Applies 'Font' to the selected form element.
formEditor_fontSize		Applies 'Font size' to the selected form element.
formEditor_fontColor		Applies 'Font color' to the selected form element.
formEditor_align		Applies 'Alignment' to the selected form element.
formEditor_delete		Deletes the selected form element.

Configure the Plugin

Form Element Balloon Setting

You can directly configure the list of buttons that will appear in the form element balloon.

// synapeditor.config.js
//...
'formEditor.config': {
    'balloon': {
        // balloon name : [array of button names to display]
        'formEditor_text': ['formEditor_textProperties', 'formEditor_delete'],
        'formEditor_textarea': ['formEditor_textareaProperties', 'formEditor_delete'],
        'formEditor_select': ['formEditor_selectProperties', 'formEditor_delete'],
        'formEditor_radio': ['formEditor_radioProperties', 'formEditor_delete'],
        'formEditor_checkbox': ['formEditor_checkboxProperties', 'formEditor_delete'],
        'formEditor_button': ['formEditor_buttonProperties', 'formEditor_delete'],
        'formEditor_hidden': ['formEditor_hiddenProperties', 'formEditor_delete'],
        'formEditor_datalist': ['formEditor_datalistProperties', 'formEditor_delete'],
        'formEditor_datalistInput': ['formEditor_datalistInputProperties', 'formEditor_delete'],
        'formEditor_label': ['formEditor_labelProperties', 'formEditor_delete'],
        'formEditor_fieldset': ['formEditor_fieldsetProperties', 'formEditor_delete'],
        'formEditor_form': ['formEditor_formProperties', 'formEditor_delete']
    }
}
//...

Using the Form Element Event Setting Feature

You can set events using the form element's properties dialog.

(Dialogs where events can be set: text field properties, text area properties, button properties, select box properties, radio button properties, checkbox properties, data list field properties)

To use this feature, event attribute insertion must be allowed in the editor's content filter settings.

You can allow event attribute insertion by setting 'editor.contentFilter.allowEventAttribute' to true. (See: Content Filter)

Caution!

Security issues that occur due to using this option cannot be the responsibility of the provider.

ACTION

insertFormRunElement

Inserts inline form elements such as text fields, text areas, and select boxes at the current caret position.

parameters

editor.execCommand('insertFormRunElement', type);

insertFormBlockElement

Inserts block form elements such as forms and fieldsets at the current caret position.

parameters

editor.execCommand('insertFormBlockElement', type);