WysiwygEditor

The WysiwygEditor component is used to display and edit HTML content. As a developer you can use this component programmatically, but if you just want to use it to display and edit field values, please refer here.

Properties

• Parent: Component

• Element tag: cm4ap-wysiwyg-editor

Parameter

Parameters in the Layout

Name	Type and Values	Description
options	Type: WysiwygEditorOptions	The settings for the editor

Wysiwyg Editor Options

Name	Type	Description
noEdit (optional)	boolean	If set to "true", it is not possible to edit the displayed content.
partialEdit (optional)	boolean	If set to "true", only some parts of the HTML content is editable. You can define those areas with css class cm-editable. This is not a security feature. If you really need to prevent some edits, please check it on your own.
controls (optional)	array of Wysiwyg editor control options	Defines the available and displayed controls. If not configured, the default controls are loaded (example).

Controls Configuration Example

<entry key="controls" class="array">
  <value class="array">
    <value>fontFamily</value>
    <value class="map">
      <entry key="options">allowedFonts</entry>
    </value>
        </value>
        <value>fontSize</value> 
        <value>fontColor</value> 
        <value>alignment</value> 
      </entry>

Available Editor Controls

fontFamily

Please note: Make sure every font is installed on the client computer or embedded in the 4ALLPORTAL css.

The values of default value option wysiwyg_font_families are:

• Arial, Helvetica, sans-serif
• "Arial Black", Gadget, sans-serif
• Georgia, serif
• "Source Sans Pro", Arial, Helvetica, sans-serif
• "Times New Roman", serif
• Verdana, sans-serif

Example Using a Value Option:

<value class="array">
    <value>fontFamily</value>
    <value class="map">
      <entry key="options">my_value_option</entry>
    </value>
</value>

my_value_option is a placeholder for the name of your value option which will be used for available fonts.

Example Using Actual Values:

<value class="array">
    <value>fontFamily</value>
    <value class="map">
        <entry key="options" class="array">
            <value class="map">
                <entry key="key">Arial, Helvetica, sans-serif</entry>
                <entry key="label">L-MY-LABEL</entry>
            </value>
            <value class="map">
                <entry key="key">"Times New Roman", serif</entry>
                <entry key="label">L-MY-SECOND_LABEL</entry>
            </value>
        </entry>
    </value>
</value>

key is the applied css value, label the displayed label key.

format

Configure format like fontFamily.

The values of default value option wysiwyg_format are:

• paragraph | <p>
• preformatted | <pre>
• header_1 | h1
• header_2 | h2
• header_3 | h3
• header_4 | h4

Possible additional values are:

• blockquote | <blockquote>
• header_5 | h5
• header_6 | h6

fontSize

Configure fontSize like fontFamily.

The values of default value option wysiwyg_font_sizes are:

• 6pt
• 7pt
• 8pt
• 9pt
• 10pt
• 10.5pt
• 11pt
• 12pt
• 14pt
• 18pt
• 20pt
• 24pt
• 30pt
• 36pt
• 40pt
• 48pt
• 56pt
• 72pt

Possible additional values are all css font size formats.

fontColor

No configuration available

fontStyle

fontStyle allows to enable/disable specific options. By default, all options are enabled:

<value class="array">
    <value>fontStyle</value>
    <value class="map">
        <entry key="bold" class="boolean">true</entry>
        <entry key="italic" class="boolean">false</entry>
        <entry key="underline" class="boolean">false</entry>
        <entry key="strikethrough" class="boolean">true</entry>
    </value>
</value>

alignment

alignment allows to enable/disable specific options. By default, all options are enabled:

<value class="array">
    <value>alignment</value>
    <value class="map">
        <entry key="alignLeft" class="boolean">true</entry>
        <entry key="alignCenter" class="boolean">false</entry>
        <entry key="alignRight" class="boolean">false</entry>
        <entry key="justify" class="boolean">true</entry>
    </value>
</value>

lists

lists allows to enable/disable specific options. By default, all options are enabled:

<value class="array">
    <value>lists</value>
    <value class="map">
        <entry key="unordered" class="boolean">true</entry>
        <entry key="ordered" class="boolean">false</entry>
    </value>
</value>

indention

indention allows to enable/disable specific options. By default, all options are enabled:

<value class="array">
  <value>indention</value>
  <value class="map">
    <entry key="outdent" class="boolean">true</entry>
    <entry key="indent" class="boolean">false</entry>
  </value>
</value>

supersubscript

supersubscript allows to enable/disable specific options. By default, all options are enabled:

<value class="array">
    <value>supersubscript</value>
    <value class="map">
        <entry key="superscript" class="boolean">true</entry>
        <entry key="subscript" class="boolean">false</entry>
    </value>
</value>

hyperlink

No configuration available

removeFormat

No configuration available

Example Configuration of the Wysiwyg Editor Component

In the following example the editor is added to a layout XML with some extra configuration: partialEdit is activated and only controls fontFamily, fontSize, fontColor and alignment are available:

<layout>
  <!-- other stuff -->

  <elements>
  <!-- other stuff -->

    <component component="cm4ap-wysiwyg-editor">
      <parameter>
        <entry key="options" class="map">
          <entry key="partialEdit" class="boolean">true</entry>
          <entry key="controls" class="array">
            <value class="array">
              <value>fontFamily</value>
              <value class="map">
                <entry key="options">allowedFonts</entry>
              </value>
            </value>
            <value>fontSize</value>
            <value>fontColor</value>
            <value>alignment</value>
          </entry>
        </entry>
      </parameter>
    </component>

  </elements>

</layout>

Result in the GUI:

Further documentation

• For HTML field details, take a look at our object renderer documentation here.
• For an HTML field implementation guide, take a look here.