CKeditor（帶有 TYPO3） - svg 標簽是 html 編碼的

Question

我正在使用 CKeditor（編寫一個插件，但它不是那么相關，因為它也在編輯模式下發生），並嘗試添加一個 svg。 我的流程：

1. 打開 CKEditor
2. 選擇“來源”模式
3. 添加一個簡單的<svg> : <svg class="u-svgicon"></svg>
4. 節省

保存后，我在源代碼中得到了這個：

<svg class="u-svgicon"></svg>

以及“常規”編輯模式下的原始 html 字符串。 我已經嘗試過allowContent、extraAllowedContent。 我當然希望 svg 保持不變。 順便說一句 - 在 SVG 里面還有另一個標簽 - <use>也被改變了。 如果我只是將 svg 標記更改為<i>標記，而沒有其他更改，則<i>標記會正確呈現。

我正在使用 TYPO3 v8，使用 CKEditor：

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

Answer 1

在您自己的預設 YAML 文件中，您需要為 svg 標簽指定 extraAllowedContent 和處理：

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

和

processing:
  allowTags:
    - svg

如果您還沒有使用自己的預設，您可以通過以下步驟創建它：

在 ext_localconf 中：

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

在配置/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

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

Answer 2

正如@Aristeidis Karavas 所說，它確實與新的 HTML 消毒劑有關。 其實不止一次。 首先從 CKEditor yaml 文件方面我有以下內容：

processing:
    HTMLparser_db:
        htmlSanitize:

它清理了保存到數據庫的內容，所以每次我點擊保存時，svgs 都會被清理。

但這是使用內置 TYPO3 sanitizer，並且由於它是文本媒體元素，因此還有一個 HTML sanitizer，通過來自流體模板的以下調用觸發：

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

但是為什么 HTML sanitizer 會清理這些特定的標簽呢？ 公平地說，IDK 的推理，但從技術調查來看，問題在於消毒劑正在使用具有相同問題的外部解析庫： https : //github.com/Masterminds/html5-php/issues/211

最終我采用了不同的解決方案，使用圖標字體而不是原始 svgs。