如何通过插件为CKEditor5中插入的图片设置宽度

要给自定义按钮插入的图片设置宽度，需要从模型属性允许和元素属性赋值两方面处理，以下是修改后的插件代码及说明：

1. 扩展模型Schema，允许图片元素的width属性 #

在插件的init方法开头，先让编辑器的模型允许imageBlock元素拥有width属性，否则设置的属性会被自动过滤：

editor.model.schema.extend('imageBlock', { allowAttributes: 'width' });

2. 创建图片元素时传入width属性 #

在创建imageElement时，直接在属性对象中添加width值（支持带单位如'500px'或纯数值500，默认单位为像素）：

修改后的完整插件代码 #

class InsertImage extends Plugin {
    init() {
        const editor = this.editor;

        // 扩展schema，允许imageBlock元素使用width属性
        editor.model.schema.extend('imageBlock', { allowAttributes: 'width' });

        editor.ui.componentFactory.add( 'InsertImage', () => {
            
            const button = new ButtonView();

            button.set( {
                label: '插入指定图片',
                tooltip: '快速插入预设图片',
                icon: '<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490 490" xml:space="preserve"><polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "/></svg>',
                withText: false
            } );

            button.on( 'execute', () => {
                editor.model.change( writer => {
                    const imageElement = writer.createElement('imageBlock', {
                        src: '/image/address/image.png',
                        width: 500 // 这里设置你需要的宽度，也可以写'500px'
                    });
                    editor.model.insertContent(imageElement, editor.model.document.selection);
                } );
            } );

            return button;
        } );
    }
}

额外注意 #

确保你的编辑器配置中加载了ImageResize插件（或ImageStyle等支持图片尺寸的插件），否则前端渲染时可能无法正确应用宽度样式。示例配置：

ClassicEditor
    .create( document.querySelector('#editor'), {
        plugins: [ InsertImage, ImageBlock, ImageResize, /* 其他必要插件 */ ],
        // 其他编辑器配置
    } )

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