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

其次，通过 CSS:

将图像设置为 100px 宽

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

请注意，您还需要在编辑器之外处理所创建内容的样式。

在 CKEditor 5 中设置图像的宽度

Setting width of Image in CKEditor 5

image

width

ckeditor

ckfinder

ckeditor5