Setting width of Image in CKEditor 5

Question

I have a page where I use CKEditor 5 with CKFinder 3. By default, the images that are included in the textarea are responsive and can only be aligned as full or right.

The concerning page has photos of contacts on it and they shouldn't be that big. How can I configure the width of an image that is inserted through the button of the toolbar?

ClassicEditor
    .create( document.querySelector( '#pageTextArea' ), {
        image: {
            styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
        }
        ckfinder: {
            uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
        }
    })

    .catch( error => {
        console.error( error );
        process.exit(1);
    });

Answer 1

To provide some custom image styling you need to:

First, configure the image.styles option.

ClassicEditor.create( element, {
     // ...
     image: {
          // ...
          styles: [
              // Pottentially some other style can go here. E.g. the `full` or `side`.
              { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
          ]
     }
}

And secondly, make the image 100px wide via CSS:

.ck-content figure.image.my-contact-side-image {
      float: right;
      width: 100px;
}

Note that you need to handle styles of the created content outside of the editor as well.