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

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

首先，配置1选项。

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将图片宽100像素：

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

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

在CKEditor 5中设置图像的宽度

1 个答案: