时间戳

首页 > 解决方案 > 在 CKEditor 5 中设置图像的宽度

image - 在 CKEditor 5 中设置图像的宽度

问题描述

我有一个页面，我在其中使用 CKEditor 5 和 CKFinder 3。默认情况下，包含在 textarea 中的图像是响应式的，并且只能对齐为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);
    });

标签： imageckeditorwidthckfinderckeditor5

解决方案

要提供一些自定义图像样式，您需要：

首先，配置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;
}

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

推荐阅读