title: How to provide details/summary HTML element in TYPO3's CKEditor?
body: <p>Unfortunately there's no details/summary element in the default CKEditor configuration of TYPO3 and I'm looking for a way to add it.</p>
  <p>What I've been trying to do:</p>
  <p>I searched and found a widget on <a href="https://ckeditor.com/cke4/addon/detail" rel="nofollow noreferrer">https://ckeditor.com/cke4/addon/detail</a> , but it's <a href="https://github.com/akilli/ckeditor4-detail" rel="nofollow noreferrer">repository on GitHub</a> has been archived and the widget does not work as expected. It requires <code>'api,widget'</code> and this generates a JavaScript error:
  <code>[CKEDITOR.resourceManager.load] Resource name &quot;api&quot; was not found at &quot;/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/api/plugin.js?t=K24B-4e13cc129f&quot;</code>.
  When removing this requirement for &quot;api&quot;, there's an error regarding line 72
  <code>CKEDITOR.api.parser.add(item, el);</code>.</p>
  <p>Then I found a <a href="https://github.com/Sensetivity/ckeditor4-detail" rel="nofollow noreferrer">similar widget at GitHub</a> , which looks like an older version of the former without requirement for &quot;api&quot;.
  It already looks quite good, but is still a bit buggy: the HTML structure is changed when saving and the summary is duplicated. When switching to the source code, the HTML structure specified in the template ...
  <code>&lt;details&gt;&lt;summary&gt;Summary&lt;/summary&gt;&lt;div class=&quot;details-content&quot;&gt;&lt;/div&gt;&lt;/details&gt;</code>
  … get's partially lost.</p>
  <p>I'm not sure if the widgets are buggy or if the editor is limited by the integration into TYPO3 and I was also not able to combine the two in a way that would lead to a working solution.</p>
  <p><strong>Update (Jul 22):</strong>
  I successfully modified the <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_tutorial_1.html" rel="nofollow noreferrer">Creating a Simple CKEditor Widget (Part 1)</a> example to create
  a widget with the following HTML structure:</p>
  <pre><code>&lt;div class=&quot;expander&quot;&gt;
      &lt;p class=&quot;expander-title&quot;&gt;Title&lt;/p&gt;
      &lt;div class=&quot;expander-content&quot;&gt;&lt;p&gt;Content...&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>With the help of a small JavaScript snippet and some CSS it now behaves almost like a details-summary element, but is not quite as good in terms of SEO and accessibility.</p>
  <p>If I replace the elements <code>&lt;div class=&quot;expander&quot;&gt;</code> and <code>&lt;p class=&quot;expander-title&quot;&gt;</code> with <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> in the widget, it unfortunately doesn't work properly anymore and changes the structure when saving. For some reason the RTE treats them differently.</p>
  <p>I have already manually added the following to the RTE configuration:</p>
  <pre><code>processing:
    allowTags:
      - details
      - summary
    allowTagsOutside:
      - details
      - summary
  </code></pre>