CKEditor自动补全下拉列表在父组件滚动时溢出问题咨询

问题复现 #

将CKEditor嵌套在设置了height: '620px'、overflowY: 'auto'的MyNote组件内（CKEditor内部无滚动），滚动MyNote至底部后，触发自动补全时，光标已随滚动被隐藏，但补全下拉列表仍可见且溢出CKEditor与MyNote组件。

可行修复方案 #

1. 为父容器添加定位上下文 #

给MyNote组件添加position: relative样式，让CKEditor的下拉面板（默认绝对定位）以父容器为基准计算位置，避免无约束溢出：

<MyNote style={{ height: '620px', overflowY: 'auto', position: 'relative' }}>
  <CKEditor /> 
</MyNote>

2. 配置CKEditor的下拉面板定位策略 #

通过CKEditor的mention插件配置，强制下拉面板基于视口调整位置，超出父容器可见范围时自动适配：

ClassicEditor
  .create(document.querySelector('#editor'), {
    mention: {
      feeds: [/* 你的自动补全数据源 */],
      dropdownPosition: 'viewport' // 基于视口定位，而非编辑器元素
    }
  })

React版本的CKEditor可通过config属性传入配置：

<CKEditor
  editor={ClassicEditor}
  config={{
    mention: {
      feeds: [/* 数据源 */],
      dropdownPosition: 'viewport'
    }
  }}
/>

3. 监听父容器滚动，自动关闭下拉面板 #

在MyNote组件内监听滚动事件，当滚动导致光标区域不可见时，调用CKEditor API关闭补全下拉：

const MyNote = ({ children, style }) => {
  const editorRef = useRef(null);

  const handleScroll = () => {
    if (editorRef.current) {
      const mentionPlugin = editorRef.current.plugins.get('Mention');
      mentionPlugin.closeDropdown();
    }
  };

  return (
    <div style={{ ...style, overflowY: 'auto' }} onScroll={handleScroll}>
      {React.cloneElement(children, { ref: editorRef })}
    </div>
  );
};

4. 同步CKEditor高度与父容器 #

让CKEditor高度自适应MyNote容器，避免父容器滚动时编辑器内容与下拉面板错位：

<MyNote style={{ height: '620px', overflowY: 'auto' }}>
  <CKEditor style={{ height: '100%' }} /> 
</MyNote>

同时通过CSS禁用CKEditor内容区域的内部滚动：

.ck-editor__editable_inline {
  overflow-y: hidden !important;
}

原理说明 #

官方示例未出现此问题，是因为示例编辑器容器未设置overflowY: auto，下拉面板的定位逻辑会自动基于编辑器可见区域调整。当父容器添加滚动属性后，定位基准被打破，需通过上述方法重新约束下拉面板的定位或同步滚动状态。

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