WYSIWYG Editor

The WYSIWYG editor component is used to display and edit HTML content. As a developer you can use this component to programmatically, but if you just want to use it to edit field values, please use the HTML Renderer (opens new window).

Element tag: cm4ap-wysiwyg-editor

Properties

• options (optional)
  • type: WYSIWYSG Editor options
  • attribute: no attribute available
  • description: This parameter defines what editor controls are available and how the editor works.

WYSIWYG Editor options

option	type	description
noEdit (optional)	boolean	If set to "true", it is not possible to edit the displayed content.
partialEdit (optional)	boolean	If st 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 WYSIWYSG Editor control options	Defines the available and displayed controls. Only 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>

Possible editor controls

fontFamily

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

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 place holder for the name of your value option which will be used for available fonts.

Example using real 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.

Default values (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

format

Configure format like fontFamily.

Possible values are:

• paragraph | <p>
• blockquote | <blockquote>
• preformatted | <pre>
• header_1 | h1
• header_2 | h2
• header_3 | h3
• header_4 | h4
• header_5 | h5
• header_6 | h6

Default values (value option: wysiwyg_format) are:

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

fontSize

Configure fontSize like fontFamily.

Possible values are all css font size formats.

Default values (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

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>

Example configuration of WYSIWYG editor component

In the following example the editor was 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: