Core | Essentials | DAM (6.7)

Appearance

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 ​

NameType and ValuesDescription
optionsType: WysiwygEditorOptionsThe settings for the editor

Wysiwyg Editor Options ​

NameTypeDescription
noEdit
(optional)		booleanIf set to "true", it is not possible to edit the displayed content.
partialEdit
(optional)		booleanIf 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 optionsDefines the available and displayed controls. If not configured, the default controls are loaded (example).

Controls Configuration Example ​

xml

<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: ​

xml
<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: ​

xml
<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:

xml
<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:

xml
<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:

xml
<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:

xml
<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:

xml
<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>

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:

xml
<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.
Request missing documentation