Wysiwyg

Use wysiwyg to display content added by WYSIWYG editor.

Configuration parameters

title

string Title of the module. If not specified title won't be displayed.

content

string represents the content added in WYSIWYG editor

moduleAppearance

string Defines if the module content appearance is determined by text editor settings only or also by the store theme style.

classNames

string (optional) represents a string containing additional classNames that will be appended to the module.

Module source code

{% if moduleConfig.title %}
    <h2 class="module__header">
        <div class="module__header-title">
            <span class="module__header_highlight">{{moduleConfig.title}}</span>
        </div>
    </h2>
{% endif %}

{% set hasEditorSettingsAppearance = moduleConfig.moduleAppearance == 'editorSettings' %}

<div {% if moduleConfig.classNames or hasEditorSettingsAppearance %}class="{% if hasEditorSettingsAppearance %}resetcss{% endif %} {{ moduleConfig.classNames|join(' ') }}"{% endif %}>
    {{ moduleConfig.content|raw }}
</div>

Used styles

• Modules
• Utils

Module configuration schema

[
  {
    "state": "unfolded",
    "label": "General settings",
    "elements": [
      {
        "type": "text",
        "name": "title",
        "label": "Module title",
        "supportsTranslations": 1
      },
      {
        "type": "wysiwyg",
        "name": "content",
        "label": "Text editor content",
        "supportsTranslations": 1
      },
      {
        "type" : "radio",
        "name" : "moduleAppearance",
        "label" : "The module content appearance is determined by:",
        "defaultValue" : "editorAndSkinSettings",
        "options": {
          "radioOptions" : [
            {
              "key" : "editorSettings",
              "label" : "only by the settings from the text editor"
            },
            {
              "key" : "editorAndSkinSettings",
              "label" : "text editor and store theme style",
              "hint" : "If you do not change the appearance of the content (e.g. text size and color) in the text editor, the module will use the store theme styles."
            }
          ]
        }
      }
    ]
  },
  {
    "state": "unfolded",
    "label": "CSS",
    "elements": [
      {
        "type": "text",
        "name": "classNames",
        "label": "CSS class",
        "labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
      }
    ]
  }
]