Skip to content

Commit

Permalink
Add a rich text Twig component (see #7034)
Browse files Browse the repository at this point in the history
Description
-----------

This introduces a `_rich_text` component as outlined in #6783.

This way you do not have to repeat yourself with things like this but can change it at one place:
```twig
<div class="rte">
    {{ text|csp_inline_styles|insert_tag|encode_email|raw }}
</div>
```

It should also make updates smoother when we add yet another filter. 😛

Commits
-------

eda2789 add a rich text component
1dc0c3a Update core-bundle/contao/templates/twig/component/_rich_text.html.twig
4b3dc38 add a note, that the text content needs to be trusted
  • Loading branch information
m-vo committed May 10, 2024
1 parent 568eb03 commit ba73769
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 7 deletions.
33 changes: 33 additions & 0 deletions core-bundle/contao/templates/twig/component/_rich_text.html.twig
@@ -0,0 +1,33 @@
{#
This component outputs rich text content, that was typically composed by
an editor in the backend using the tinyMCE editor. By default, the content
will be output raw and therefore needs to be trusted!
<div class="rte">
<p>Lorem ipsum</p>
</div>
Mandatory variables:
@var string text
Optional variables:
@var \Contao\CoreBundle\String\HtmlAttributes attributes
Note:
You can either group all variables in an object named "rich_text" or
all directly in the context. Grouping under an object has precedence.
#}

{% block rich_text_component %}
{% set rich_text = rich_text|default(_context) %}

{% set rich_text_attributes = attrs(rich_text.attributes|default)
.addClass('rte')
.mergeWith(rich_text_attributes|default)
%}
<div{% block rich_text_attributes %}{{ rich_text_attributes }}{% endblock %}>
{% block rich_text_inner %}
{{ rich_text.text|csp_inline_styles|insert_tag|encode_email|raw }}
{% endblock %}
</div>
{% endblock %}
@@ -1,5 +1,6 @@
{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_figure.html.twig" %}
{% use "@Contao/component/_rich_text.html.twig" %}

{% set content_layout_attributes = attrs()
.addClass('media media--' ~ layout, layout and image)
Expand All @@ -26,13 +27,7 @@

{# Richtext #}
{% block text %}
{% set text_attributes = attrs()
.addClass('rte')
.mergeWith(text_attributes|default)
%}
<div{% block text_attributes %}{{ text_attributes }}{% endblock %}>
{{ text|csp_inline_styles|insert_tag|encode_email|raw }}
</div>
{% with {text, attributes: text_attributes|default} %}{{ block('rich_text_component') }}{% endwith %}
{% endblock %}

{% if layout == 'below' %}
Expand Down

0 comments on commit ba73769

Please sign in to comment.