CKEditor5为何用<span>包裹图片为HTML Object？如何消除该包裹？

为什么CKEditor5会用包裹图片？ #

因为你未使用CKEditor5原生图片插件，仅通过**GeneralHtmlSupport（GHS）**兼容图片元素。GHS对编辑器原生不识别的元素，默认会将其包装为html-object-embed类型的小部件（即带ck-widget类的<span>容器），把这类“未知”元素转为编辑器可管理的不可编辑组件。而CKEditor4原生支持<img>标签，因此不会添加额外包裹层。

解决办法 #

方案1：改用CKEditor5原生图片插件（推荐） #

原生图片插件能完美支持图片排版、样式调整，且不会产生额外包裹层，是最稳妥的处理方式：

• 安装所需插件（基础图片插件、图片缩放插件等）：

  npm install @ckeditor/ckeditor5-image
  

• 在编辑器配置中注册插件，同时让原生插件接管<img>的处理（移除GHS对图片的兼容配置）：

  import { Image, ImageResize } from '@ckeditor/ckeditor5-image';
  
  ClassicEditor
      .create( document.querySelector( '#editor' ), {
          plugins: [ Image, ImageResize, /* 其他你需要的插件 */ ],
          toolbar: [ 'imageUpload', 'imageResize', /* 其他工具按钮 */ ],
          htmlSupport: {
              allow: [
                  // 保留GHS需要支持的其他元素，移除img相关配置
                  {
                      name: 'h3',
                      classes: 'heading-3'
                  },
                  {
                      name: 'p',
                      classes: 'large-text'
                  }
                  // ...其他元素配置
              ]
          }
      } )
      .then( editor => {
          console.log( 'Editor initialized', editor );
      } )
      .catch( error => {
          console.error( error.stack );
      } );
  

方案2：配置GHS让图片不被包裹 #

如果必须通过GHS兼容图片，可以修改配置，将<img>标记为可编辑内联元素，避免被包装为widget：

import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ GeneralHtmlSupport, /* 其他插件 */ ],
        htmlSupport: {
            allow: [
                {
                    name: 'img',
                    attributes: true, // 允许图片的所有属性
                    styles: true,     // 允许图片的所有样式
                    classes: true     // 允许图片的所有类名
                },
                {
                    name: 'h3',
                    classes: 'heading-3'
                },
                {
                    name: 'p',
                    classes: 'large-text'
                }
            ],
            // 禁止生成html-object-embed包裹层
            disallow: [
                {
                    name: 'span',
                    classes: 'html-object-embed'
                }
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

注意：这种方式仅能让图片正常显示，但无法提供原生图片插件的交互能力（比如选中调整大小、上传替换等）。

内容的提问来源于stack exchange，提问作者Mike C