CKEditor 5如何恢复CKEditor 4的高级图片属性对话框？

针对你从CKEditor 4升级到5后丢失图片边框、尺寸等属性控制的问题，可通过以下几种方式实现类似旧版的功能：

1. 利用官方插件扩展基础功能 #

图片尺寸调整 #

启用ImageResize官方插件，它支持：

• 拖拽图片边角直接调整尺寸
• 在工具栏添加尺寸输入控件，精确设置宽高
  配置示例：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ 'ImageResize', ... ],
        toolbar: [ 'imageResize', ... ],
        imageResize: {
            resizeOptions: [
                {
                    name: 'imageResize:original',
                    label: 'Original',
                    value: null
                },
                {
                    name: 'imageResize:50',
                    label: '50%',
                    value: '50'
                },
                {
                    name: 'imageResize:75',
                    label: '75%',
                    value: '75'
                }
            ]
        }
    } )

自定义带边框的图片样式 #

虽然官方推荐语义化样式，但你可以自定义包含边框的样式类，将样式定义在项目的CSS中，再配置到编辑器的image.style里：

1. 先在全局CSS中添加样式：

.image-border {
    border: 2px solid #ccc;
    padding: 3px;
}
.image-border-thick {
    border: 4px solid #333;
}

2. 编辑器配置中添加自定义样式：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ 'ImageStyle', ... ],
        image: {
            styles: [
                'full',
                'side',
                { name: 'border', title: '带细边框', class: 'image-border' },
                { name: 'border-thick', title: '带粗边框', class: 'image-border-thick' }
            ]
        }
    } )

用户就能通过工具栏选择这些样式，快速给图片添加边框。

2. 使用第三方插件实现属性对话框 #

社区维护的第三方插件（如ckeditor5-image-attributes类插件）可以提供类似CKEditor 4的图片属性对话框，支持直接设置边框、边距、尺寸等inline属性。这类插件通常需要你通过npm安装并集成到编辑器中，配置后就能在图片右键菜单或工具栏中打开属性编辑对话框，满足用户对旧版操作习惯的需求。

补充说明 #

CKEditor 5的核心设计理念是分离内容结构与样式，优先推荐语义化的类名控制样式，但上述方案可以兼顾这一理念的同时，满足用户对旧版灵活性的需求。

内容的提问来源于stack exchange，提问作者ThiefMaster