Установка ширины изображения в CKEditor 5

Question

У меня есть страница, где я использую CKEditor 5 с CKFinder 3. По умолчанию изображения, включенные в текстовую область, являются адаптивными и могут быть выровнены только как full или же right,

На соответствующей странице есть фотографии контактов, и они не должны быть такими большими. Как настроить ширину изображения, которое вставляется с помощью кнопки на панели инструментов?

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

Чтобы обеспечить пользовательский стиль изображения, вам необходимо:

Сначала настройте параметр image.styles.

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' }
          ]
     }
}

А во-вторых, сделайте изображение шириной 100 пикселей с помощью CSS:

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

Обратите внимание, что вам нужно обрабатывать стили созданного контента и вне редактора.