代码之家 › 专栏 › 技术社区 › Stephan Tips

在CKeditor 5中设置图像宽度

ckeditor5 ckfinder width ckeditor image

Stephan Tips · 技术社区 · 6 年前

我有一个页面,在这里我使用带查找器3的CKeditor 5。默认情况下,文本区域中包含的图像是响应的,只能对齐为 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);
    });

1 回复 | 直到 6 年前

Maciej Bukowski 6 年前

要提供一些自定义图像样式,您需要:

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

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

推荐文章

user3331122 · 在CKEDITOR中添加dynamycli参数

6 年前

Purcell · 如何禁用ckeditor cloudservices

6 年前

Nick Manning · 为什么CKEditor5使用承诺来初始化它?

6 年前

hanzinati · 使CKEditor 5接受或内联样式

6 年前

Rainer Schwarze · 如何使CKEditor4与预加载的插件文件一起工作?

6 年前

cytsunny · 当源函数打开时,如何在CKEditor中禁用/启用按钮?

7 年前

Evgeny Gil · CKEditor在源HTML的标记之间添加缩进

7 年前

Minstel · CKeditor子编号列表插件

7 年前

Hrvoje Batrnek · CKEditor文件上载错误的文件编码(非UTF-8)

7 年前

Kalpesh Prajapati · 在CK编辑器中上载文件

7 年前