ckeditor5

Why does CKEditor5 wrap images in a <span> which renders as an "HTML Object" block?


I am in the process of updating an app from using CKEditor 4 to 5 (way late to the party, I know). Why does CKEditor5 wrap my images in a span tag? I am not using any image plugins, the images are supported through the GeneralHtmlSupport plugin. The span/HTML Object wrapper is affecting the flow of content and overriding some styles set on images. Is there any way to eliminate this?

CKEditor4:

<h3 class="heading-3">
    Some text
    <img alt="" class="img-responsive" data-src="id:1634839420011" data-cke-saved-src="https://...639d2a8b4" src="https://...639d2a8b4" style="width: 23%; float: left; display: inline; margin: 0px 10px 0px 0px;">
</h3>
<p class="large-text">Next paragraph</p>

which renders like:

enter image description here

CKEditor5:

<h3 class="dheading-3">
    Some text
    <span class="html-object-embed ck-widget" data-html-object-embed-label="HTML object" contenteditable="false">
        <img class="html-object-embed__content img-responsive" style="display:inline;float:left;margin:0px 10px 0px 0px;width:23%;" src="https://...9338744" data-src="box:1634839420011" alt="" data-cke-saved-src="https://...9338744">
    </span>
</h3>
<p class="large-text">Next paragraph</p>

which renders like:

enter image description here


Solution

  • I was able to get images to display the way I wanted by: