No Code Attached Yet
avatar wwwiiimmm
wwwiiimmm
7 Aug 2024

I have custom modules with an svg with multiple icons.
When I want to display a certain icon I use <use>.

This worked fine when I created the website with J5.0.1.

Now on J5.1.2 when I edit a module, <use> is stripped from the code.
Unchanged modules still display the svg icon, so the code is correct.

Also in J4.4.6 I can still add icons using <use>.

Somewhere between J5.0.1 and 5.1.2 adding <use> to svgs stopped working.

In the TinyMCE plugin the Use Joomla's text filter is set to YES.
In Global configuration The text filter for Super User is set to No filtering.

Steps to reproduce the issue

Create a new Custom module
Go to Tools > Source code+
Copy/paste the following code into the popup window and hit Save.

<div><svg aria-hidden="true" class="visually-hidden" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="star" d="M10,0l2.245,6.91l7.266,-0l-5.878,4.27l2.245,6.91l-5.878,-4.27l-5.878,4.27l2.245,-6.91l-5.878,-4.27l7.266,-0l2.245,-6.91Z"></path></svg></div>
<div><svg width="100%" height="100%" viewBox="0 0 100 20"> <use href="#star"></use> <use href="#star" x="20"></use> <use href="#star" x="40"></use> <use href="#star" x="60"></use> <use href="#star" x="80"></use> </svg> </span></li></ul></div>

Expected result

Display 5 stars (+ original svg)

Actual result

Display only the original svg and all <use>s are stripped.

System information (as much as possible)

Joomla 5.1.2
TinyMCE 6.8.3
PHP 8.3
MySQL 8 / MariaDB 10.x

avatar wwwiiimmm wwwiiimmm - open - 7 Aug 2024
avatar joomla-cms-bot joomla-cms-bot - change - 7 Aug 2024
Title
[5.1.2] TinyMCE strips <use> from <svg>
[5.1.2] TinyMCE strips from
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 7 Aug 2024
avatar wwwiiimmm wwwiiimmm - change - 7 Aug 2024
The description was changed
avatar wwwiiimmm wwwiiimmm - edited - 7 Aug 2024
avatar wwwiiimmm wwwiiimmm - change - 7 Aug 2024
Title
[5.1.2] TinyMCE strips from
[5.1.2] TinyMCE strips from svgs
avatar wwwiiimmm wwwiiimmm - change - 7 Aug 2024
Title
[5.1.2] TinyMCE strips from svgs
[5.1.2] TinyMCE strips use from svgs
avatar brianteeman
brianteeman - comment - 7 Aug 2024

I suspect that this may be a security restriction.

Can you try the pure tinymce demo and see if it works there

https://www.tiny.cloud/docs/tinymce/6/

avatar wwwiiimmm
wwwiiimmm - comment - 8 Aug 2024

Thank you.

Though the demo seems to only demonstrate the WYSIWYG part.
It seems you cannot test HTML. (At least I don't see it.)

And HTML is needed to test this.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43893.

avatar brianteeman
brianteeman - comment - 8 Aug 2024
avatar wwwiiimmm
wwwiiimmm - comment - 8 Aug 2024

Thank you.

The TinyMCE demo removes all <svg>s from HTML after saving.

In Joomla TinyMCE only removes <use>s from the HTML, but keeps the <svg>s.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43893.

avatar wwwiiimmm wwwiiimmm - close - 8 Aug 2024
avatar wwwiiimmm wwwiiimmm - change - 8 Aug 2024
Status New Closed
Closed_Date 0000-00-00 00:00:00 2024-08-08 12:24:16
Closed_By wwwiiimmm
avatar wwwiiimmm
wwwiiimmm - comment - 8 Aug 2024

Okay, after some reading, more people ask about this on the TinyMCE github. The usual reply is a link to the security guide.
https://www.tiny.cloud/docs/tinymce/6/security/

It seems TinyMCE does not support SVGs at all for security reasons.

There is a way to allow specific elements with the extended valid elements.
So I tried to add svg[*],use[*] to Extende valid elements in the TinyMCE plugin.
<svg> worked (well it worked before too), but <use> still did not. Maybe because it is an element inside an svg.

I will close this as it seems it's not a Joomla issue.

I'll use CodeMirror for the custom modules that contain my SVGs.

Add a Comment

Login with GitHub to post a comment