WYSIWYG¶

WYSIWYG (What You See Is What You Get) element is a text editor which shows content the way they will look on website.

View in SVE:

wysiwyg

View on the page:

wysiwyg

Build-in Validators¶

Element does not have build-in validators.

Available Validators¶

Element has available validators:

length

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "wysiwyg",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string,
  "<element_validators>" : []
}

example

{
    "type": "wysiwyg",
    "name": "legalNotice",
    "label": "Legal notice",
    "supportsTranslations": true
}

Element value¶

If value is filled: string.

usage in module TWIG

{% if moduleConfig.legalNotice %}
    <p class="newsletter__legal-notice mb-xs-2">{{ moduleConfig.legalNotice|raw }}</p>
{% endif %}

Example of module¶

Twig¶

Twig

<div>
<b>{{ translate("Legal notice") }}</b>
<p>{{ moduleConfig.legalNotice|raw }}</p>
</div>

JSON configuration¶

JSON configuration

[
  {
    "label": "EXAMPLE",
    "state": "unfolded",
    "elements": [
      {
        "type": "wysiwyg",
        "name": "legalNotice",
        "label": "Legal notice",
        "supportsTranslations": true
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "Legal notice" : "Informacje prawne"
    },
    "en_US": {
      "Legal notice": "Legal notice"
    }
  },
  "schema": {
    "pl_PL": {
      "Legal notice" : "Informacje prawne"
    },
    "en_US": {
      "Legal notice": "Legal notice"
    }
  }
}