ckeditor5 通过插件为插入的图像添加宽度

Question

我正在慢慢从 ckeditor4 迁移到 ckeditor5，但它要复杂得多。

我有专用按钮来插入非常具体的图像以节省时间，因此尝试将它们移至 ckeditor5。但是，我不知道如何设置插入图像的宽度？

这是工作插件代码示例：

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

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

            button.set( {
                label: 'label',
                tooltip: 'label',
                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
            } );

            // Execute a callback function when the button is clicked
            button.on( 'execute', () => {

                // Change the model using the model writer
                editor.model.change( writer => {
                    const imageElement = writer.createElement('imageBlock', {
                        src: '/image/address/image.png'
                    });
                    editor.model.insertContent(imageElement, editor.model.document.selection);
                } );
            } );

            return button;
        } );
    }
}

Answer 1

在CKEditor 5中，插入图像时需要在模型中设置宽度、高度或alt等图像属性。

editor.model.change(writer => {
   const imageElement = writer.createElement('imageBlock', {
      src: '/image/address/image.png',
      width: '300px' // Set the width attribute here
   });
   editor.model.insertContent(imageElement, editor.model.document.selection);
});