CKEditor5用于邮件模板项目时图片调整大小功能无法正常生效

问题根因 #

• CKEditor 5默认的图片调整大小逻辑是将宽度样式写在外层<figure>标签上，<img>标签本身不携带尺寸样式
• 绝大多数邮件客户端对<figure>标签的样式支持度极低，也不会继承父元素的宽度属性，导致你设置的尺寸不生效，图片会以原始尺寸渲染

可行解决方法 #

方法1：修改CKEditor输出规则，把宽度写到img标签上 #

直接调整CKEditor的输出逻辑，将尺寸样式内联到<img>标签上，符合邮件客户端的兼容要求，代码修改参考如下：

<CKEditor
    editor={ ClassicEditor }
    config={ {
        toolbar: [ 'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ,  'fontColor' , 'fontBackgroundColor' , 'code', 'uploadImage'],
        ckfinder:{
            uploadUrl:'upload url'
        },
        image: {
            resizeUnit: '%'
        }
    } }
    data={template}
    onReady={ editor => {
        // 原有逻辑保留
    } }
    onChange={ ( event, editor ) => {
        const originData = editor.getData();
        // 新增HTML处理逻辑：把figure的宽度转移到img标签上
        const processedData = originData.replace(/<figure[^>]*style="width:([^"]+)"[^>]*><img([^>]*)><\/figure>/g, (match, width, imgAttrs) => {
            return `<figure><img ${imgAttrs} style="width:${width};max-width:100%;height:auto;"></figure>`
        })
        setTemplate(processedData)
    } }
/>

方法2：渲染邮件模板前统一处理HTML #

如果不想修改CKEditor的配置，可以在邮件发送前、或者内容存入数据库前，统一对HTML做一次正则替换处理，逻辑和上方onChange里的替换规则一致即可。

额外提示：邮件模板的所有样式尽量直接内联到对应元素上，避免使用类选择器、父元素继承样式，能大幅提升各客户端的兼容性

内容的提问来源于stack exchange，提问作者Tony George