CODEWITHSUNDEEP
ckeditortypo3ckeditor4.xtypo3-8.x
romand
romand

Reputation: 29

CKeditor (with TYPO3) - svg tag is html encoded

I'm working with CKeditor (writing a plugin, but it's not that relevant, as it happens also in editing mode), and trying to add an svg. My process:

  1. Open CKEditor
  2. Choose the "Source" mode
  3. Add a simple <svg>: <svg class="u-svgicon"></svg>
  4. Save

After saving, I get this in source:

&lt;svg class="u-svgicon"&gt;&lt;/svg&gt;

And the original, html, string in the "regular" editing mode. I already tried to allowContent, extraAllowedContent. I would, of course, like to have the svg unchanged. BTW - inside the SVG there is another tag - <use> which also gets changed. If I just change the svg tag to an <i> tag, with no other changes, the <i> tag renders correctly.

I'm working with TYPO3 v8, with CKEditor:

timestamp:"L4KA",version:"4.16.1 (Standard)",revision:"cae20318d4"

Upvotes: 0

Views: 989

Answers (2)

romand
romand

Reputation: 29

As @Aristeidis Karavas said, it really has to do with the new HTML sanitizer. Actually more than once. First of all from CKEditor yaml file side I had the following:

processing:
    HTMLparser_db:
        htmlSanitize:

Which sanitized the content saved to DB, so each time I clicked save, the svgs got sanitized.

But this is using the build-in TYPO3 sanitizer, and since it's a text media element, there is also an HTML sanitizer that is triggered via the following call from a fluid template:

{data.bodytext -> f:format.html()}

But why would the HTML sanitizer sanitize these specific tags? To be fair IDK the reasoning, but from a technical investigation, the problem is that the sanitizer is using an external parsing library with the same issue: https://github.com/Masterminds/html5-php/issues/211

Eventually I went with a different solution, using icon font instead of raw svgs.

Upvotes: 0

tbs
tbs

Reputation: 139

In your own preset YAML file you need to specify extraAllowedContent and processing for the svg tag:

editor:
  config: 
    extraAllowedContent: "svg(*)"

And

processing:
  allowTags:
    - svg

If you dont use your own preset yet, you can create it with the following steps:

In ext_localconf:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset'] = 'EXT:my_extension/Configuration/RTE/MyPreset.yaml';

In Configuration/RTE/MyPreset.yaml

# Import basic configuration
imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Add configuration for the editor
editor:
  config:
    extraAllowedContent: "svg(*)"

processing:
  allowTags:
    - svg

Documentation: https://docs.typo3.org/c/typo3/cms-rte-ckeditor/8.7/en-us/Configuration/Examples.html

Upvotes: 0

Related Questions