如何为CKEditor对话框添加垂直滚动条？

当然可以！我之前做项目时也遇到过这种树形结构撑爆CKEditor对话框的情况，给对话框加垂直滚动条完全可行，下面分两种常见的CKEditor版本给你具体方案：

针对CKEditor 4 #

方法1：全局CSS控制最省心

CKEditor 4的对话框内容区域有固定的类名.cke_dialog_contents_body，直接给这个类加滚动样式就行。把这段CSS加到你的页面样式文件里：

.cke_dialog_contents_body {
  /* 这里的数值可以根据对话框的标题栏、底部按钮高度调整，确保内容不会被裁切 */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

这样所有对话框的内容区域都会自动在超出高度时显示垂直滚动条，不用单独改每个对话框的代码。

方法2：针对单个对话框自定义

如果你只想给包含树形结构的特定对话框加滚动条，可以在对话框定义时，给树形结构的容器直接设置样式：

CKEDITOR.dialog.add('treeDialog', function(editor) {
  return {
    title: '树形选择器',
    contents: [
      {
        id: 'treeTab',
        label: '选择分类',
        elements: [
          {
            type: 'html',
            // 给树形结构的容器设置最大高度和滚动属性
            html: '<div style="max-height: 450px; overflow-y: auto; padding: 8px;">' +
                  '<!-- 这里放置你的树形结构HTML代码 -->' +
                  '</div>'
          }
        ]
      }
    ]
  };
});

针对CKEditor 5 #

CKEditor 5的模态对话框内容区类名是.ck-modal__content，同样可以用CSS全局控制：

.ck-modal__content {
  max-height: 80vh;
  overflow-y: auto;
}

要是你是自定义的UI组件里包含树形结构，也可以在组件初始化时给容器设置样式：

import { View } from '@ckeditor/ckeditor5-ui';

class TreeView extends View {
  constructor(editor) {
    super(editor.locale);
    
    // 创建带滚动条的容器
    const treeContainer = this.createChildElement('div', {
      style: 'max-height: 400px; overflow-y: auto; width: 100%;'
    });
    
    // 在这里把树形结构挂载到treeContainer上
    // ...
  }
}

小提示 #

• 调整max-height数值时，最好实际测试一下，确保对话框的底部按钮不会被滚动条覆盖；
• 如果你的树形结构是用第三方插件实现的，要检查插件本身的容器样式会不会和滚动属性冲突，必要时给插件容器也加上overflow-y: auto。

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