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.
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>
Display 5 stars (+ original svg)
Display only the original svg and all <use>
s are stripped.
Joomla 5.1.2
TinyMCE 6.8.3
PHP 8.3
MySQL 8 / MariaDB 10.x
Title |
|
||||||
Labels |
Added:
No Code Attached Yet
|
Title |
|
Title |
|
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.
Sorry the correct link was https://www.tiny.cloud/docs/tinymce/6/full-featured-open-source-demo/
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.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-08-08 12:24:16 |
Closed_By | ⇒ | wwwiiimmm |
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.
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/