Admin/Widgets/editor

Editor Widget

This widget will initialize instances of CKEditor or CodeMirror depending the provided data attribute of each textarea, within the container the widget is bound to. Purpose of this module is to provide a common wrapper of the textarea and record specific editor which means that the user will be able to set an editor for a specific record and textarea and store this preference in the database.

Currently the available editors are "ckeditor" and "codemirror".

Important: Make sure that you provide the required options as described below. The module is flexible enough to provide a solution for each page code base.

Options (Container)

The following options are bound as data attributes to the element where the module is bound on (most of the times a container that includes textarea elements).

Selector | data-editor-selector | String | Optional

Provide a selector for the textareas to be converted to editor instances. This option defaults to "textarea" and will match all the textarea elements inside the container.

Event Target | data-editor-event-target | String | Optional

Provide a selector that will mark the element which will start the submit/save process of the page. If provided the selected editor preference will be saved through the user configuration service with an AJAX request.

Important: There is no default value for this option.

Event Type | data-editor-event-type | String | Optional

Provide a JavaScript event that will mark the submit/save process of the page. If provided an event handler will be bound on the element marked by the "event-target" option and AJAX requests will save the current editor preference in the user configuration table.

Important: There is no default value for this option.

AutoHide | data-editor-auto-hide | Boolean | Optional

Provide "true" or "false" in order to auto hide the editors, if the textareas are not visible at the beginning. Defaults value is "false"

AutoUpdate | data-editor-auto-update | Boolean | Optional

Indicates if the corresponding textarea of the editor should be updated automatically. Default value is "true"

Initialization Event Type | data-editor-init-event-type | String | Optional

Provide a custom initialization event which will trigger the start of the editor conversion. By default the editor instances will be created once the engine is ready 'JSENGINE_INIT_FINISHED', but there are cases where a custom event is required (e.g. initialization of editor widget dynamically within a dialog).

Options (Textarea)

The following options are bound as data attributes to each textarea element within the parent container.

Editor Identifier | data-editor-identifier | String | Required

Each child textarea element needs to have a unique identifier string which needs to apply with the following naming convention the "editor-{record type}-{id}-{textarea name}-{language code} (e.g. editor-products-2-short_description-de). In cases where the record ID is not set yet (new record creation), it is advised that you leave the {id} placeholder and replace it later on whenever the record is generated into the database (more information about this edge case in the examples below).

Editor Type | data-editor-type | String | Optional

This option can have one of the available editor values which will also state the selected editor upon initialization. It is optional and the default value is "ckeditor".

Events

The '#editor-container' element is where the widget is bound on.

// Fires up when all textareas are ready.
$('#editor-container').on('editor:ready', (event, $textareas) => { ... });

// Fires up each time a single textarea is ready.
$('#editor-container').on('editor:textarea_ready', (event, $textarea) => { ... });

Examples

Simple Usage

Notice that this example showcases the creation of a new customer which means that the customer's ID is not known yet. After its initialization, the widget will create a hidden field in the form with the "editor_identifiers[textarea-identifier]" name. This hidden field will have the selected editor type as value which be used by the backend callback to store the correct editor identifier value, once the customer's ID is generated (record inserted). Use the "UserConfigurationService" in backend for adding the value to the database.

<div data-gx-widget="editor" data-editor-event-target="#customer-form"  data-editor-event-type="submit">
  <form id="customer-form">
    <!-- Other Fields ... ->
    <textarea class="wysiwyg" data-editor-identifier="editor-customers-{id}-notes-de"></textarea>
  </form>
</div>