DOM structure

When considering the styling of Editor, it is important to understand the HTML structure that Editor uses to display its various components. Like the rest of Editor, the HTML that it uses is highly modularised with elements being reused for the various display options Editor presents. This page documents the HTML structure used for each component so you can provide styling information to have Editor match the look and feel that you required.

Primary elements

The primary elements in Editor are those which are reused as part of various display options.

Fields

Each field in the form has the following structure:

<div class="DTE_Field DTE_Field_Type_{TYPE} DTE_Field_Name_{NAME} ">
    <label class="DTE_Label" for="DTE_Field_{NAME}">
        TEXT-LABEL
        <div class="DTE_Label_Info">
            TEXT-LABEL-INFO
        </div>
    </label>
    <div class="DTE_Field_Input">
        <div class="DTE_Field_InputControl"
            <input id="DTE_Field_{NAME}" type="text">
        </div>
        <div class="multi-value">
            MULTI-TITLE
            <span class="multi-info">
                MULTI-INFO
            </span>
        </div>
        <div class="multi-restore">
            MULTI-RESTORE
        </div>
        <div class="DTE_Field_Error">
            TEXT-FIELD-ERROR
        </div>
        <div class="DTE_Field_Message">
            TEXT-FIELD-MESSAGE
        </div>
        <div class="DTE_Field_Info">
            TEXT-FIELD-INFO
        </div>
    </div>
</div>

Where:

• TYPE is the field type (fields.type). This provides the ability to CSS style fields of a specific type
• NAME is the field name (fields.name)
• TEXT-LABEL is field label (fields.label)
• TEXT-FIELD-ERROR is field error message (error())
• TEXT-FIELD-MESSAGE is the field general information message (message())
• TEXT-FIELD-INFO is the field information outline (fields.fieldInfo)
• MULTI-TITLE is the multi-value label (i18n.multi.title)
• MULTI-INFO is the multi-value detailed information text (i18n.multi.info) - only the first of these in the form will be shown
• MULTI-RESTORE is the multi-value restore button text (i18n.multi.restore).
  • Note that only one of the div.multi-value and div.multi-restore elements will be shown at a time. Neither will be shown if the form is not multi-row editing.
  • Additionally, this two multi-row DOM information elements are present in Editor 1.5+ only.

Form

The Editor form has the following structure which is used in both the main and bubble editing options:

<form>
    <div class="DTE_Form_Content">
        FIELDS
    </div>
</form>

Where:

• FIELDS are the fields defined above.

Header

The form title is optionally used by the main and bubble editing displays to provide summary information to the end user and has the following structure:

<div class="DTE_Header">
    <div class="DTE_Header_Content">
        TEXT-TITLE
    </div>
</div>

Where:

• TEXT-TITLE is the form title text set by title()

Buttons

The buttons that Editor can show (buttons()) have the following structure:

<div class="DTE_Form_Buttons">
    <button>
        TEXT-BUTTON
    </button>
    ...
</div>

Where:

• TEXT-BUTTON is the button text as defined by the label option of the button-options object.
• ... is the repeating button elements, if more than one button element is defined.

Message

The form message can provide a general overview message about the form to the end user and has the following structure:

<div class="DTE_Form_Info">
    TEXT-MESSAGE
</div>

Where:

• TEXT-MESSAGE is the message text set by message()

Error

<div class="DTE_Form_Error">
    TEXT-ERROR
</div>

Where:

• TEXT-ERROR is the message text set by error()

Editing

Editor's three editing modes each have different markup that they use for display of the form, with the primary parts (as defined above) reused between the display options.

Main

The main editing form (create(), edit() and remove()) is used to show all of the fields in the form, and has the following structure:

<div class="DTE DTE_Action_Create">
    HEADER
    <div class="DTE_Processing_Indicator"></div>
    <div class="DTE_Body">
        <div class="DTE_Body_Content">
            MESSAGE
            FORM
        </div>
    </div>
    <div class="DTE_Footer">
        <div class="DTE_Footer_Content"></div>
        ERROR
        BUTTONS
    </div>
</div>

Where:

• HEADER is the form header, as defined above
• MESSAGE is the form general message, as defined above
• FORM is the form itself, as defined above
• ERROR is the form error message, as defined above
• BUTTONS is the form button collection, as defined above

Bubble

Bubble editing provides a fast editing for one or more fields in a table. The bubble element is positioned above the elements that were used to activate the edit and has the following structure:

<div class="DTE DTE_Bubble">
    <div class="DTE_Bubble_Liner" style="left: 0px;">
        HEADER
        MESSAGE
        <div class="DTE_Bubble_Table">
            FORM
            <div class="DTE_Bubble_Close"></div>
            BUTTONS
        </div>
        ERROR
    </div>
    <div class="DTE_Bubble_Triangle"></div>
</div>

Where:

• HEADER is the form header, as defined above
• MESSAGE is the form general message, as defined above
• FORM is the form itself, as defined above
• ERROR is the form error message, as defined above
• BUTTONS is the form button collection, as defined above

Bubble background

When bubble editing is shown, an additional element is also added to the document (attached to body) which is used to providing shading behind the bubble editing display through CSS. It has the structure:

<div class="DTE_Bubble_Background"></div>

Inline

Inline editing provides a fast editing for a single field, inserting the field input into the table directly. The HTML inserted into the cell has the following structure:

<div class="DTE DTE_Inline">
    <div class="DTE_Inline_Field">
        FIELD
    </div>
    <div class="DTE_Inline_Buttons">
        BUTTONS
    </div>
</div>

Where:

• FIELD is the field to be edited, as defined above
• BUTTONS is the form button collection, as defined above

Display controllers

Editor has two built in display controllers, which are used to present the form to the end user in different ways. Typically you would want to just use the default CSS for these display controllers, although it can be useful to tweak the styling for your use case.

Lightbox

The lightbox display controller displays the form as a box floating above the page. It does this with the following DOM structure:

<div class="DTED_Lightbox_Wrapper">
    <div class="DTED_Lightbox_Container">
        <div class="DTED_Lightbox_Content_Wrapper">
            <div class="DTED_Lightbox_Content">
                MAIN
                <div class="DTED_Lightbox_Close"></div>
            </div>
        </div>
    </div>
</div>

Where:

• MAIN is main editing form, as defined above

Lightbox background

The lightbox display controller will also add a background element to the document (attached to body) which is used to providing shading behind the lightbox display through CSS. It has the structure:

<div class="DTED_Lightbox_Background"></div>

Envelope

The envelope display controller shows the editing form as attached to another element in the page - typically the row being edited or the table header. It has the following structure:

<div class="DTED_Envelope_Wrapper">
    <div class="DTED_Envelope_ShadowLeft"></div>
    <div class="DTED_Envelope_ShadowRight"></div>
    <div class="DTED_Envelope_Container">
        MAIN
        <div class="DTED_Envelope_Close">×</div>
    </div>
</div>

Where:

• MAIN is main editing form, as defined above

Envelope background

The envelope display controller will also add a background element to the document (attached to body) which is used to providing shading behind the envelope display through CSS. It has the structure:

<div class="DTED_Envelope_Background"></div>