Next.js项目中CKEditor 4 React全屏模式下下拉菜单无法展开的问题求助

I've run into similar compatibility issues between Next.js and CKEditor 4, and this dropdown failure in fullscreen is almost certainly tied to Next.js's SSR (Server-Side Rendering) behavior or DOM/style isolation that doesn't exist in pure React CSR (Client-Side Rendering) apps. Here are the most effective fixes to try:

1. Dynamically Import CKEditor with SSR Disabled #

CKEditor 4 relies heavily on browser DOM APIs, which aren't available during Next.js's server-side render. This incomplete initialization often breaks interactive elements like dropdowns when switching to fullscreen.

Use Next.js's dynamic import to load CKEditor only on the client:

import dynamic from 'next/dynamic';

// Disable SSR for CKEditor to ensure it initializes in the browser
const CKEditor = dynamic(() => import('ckeditor4-react'), {
  ssr: false,
  loading: () => <div>Loading editor...</div>
});

Replace your regular CKEditor import with this dynamic one. This is the most common fix for this exact issue.

2. Adjust Fullscreen Mode CSS for Dropdowns #

Sometimes, the dropdown containers get hidden behind other elements or lose proper positioning when CKEditor enters fullscreen mode. Add this custom CSS to your project:

/* Ensure dropdown panels stay visible on top in fullscreen */
.cke_maximized .cke_panel_container {
  z-index: 99999 !important;
  position: fixed !important;
  top: auto !important;
}

This forces the dropdown panel to stay above all other content and maintain correct positioning when the editor is maximized.

3. Reinitialize Dropdown Events (If Needed) #

In rare cases, Next.js's hydration process can unbind CKEditor's dropdown click events. If the first two fixes don't work, manually reattach the events after the component mounts:

For Class Components: #

class YourEditorComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ckEditorRef = React.createRef();
  }

  componentDidMount() {
    const editorInstance = this.ckEditorRef.current?.editor;
    if (!editorInstance) return;

    // Reinitialize dropdown click handlers
    Object.values(editorInstance.ui._.items).forEach(item => {
      if (item.command?.name === 'fontSize' || item.command?.name === 'font') {
        item.on('click', () => {
          editorInstance.showDropdown(item);
        });
      }
    });
  }

  render() {
    return (
      <CKEditor
        ref={this.ckEditorRef}
        data={this.state.static_page.content}
        onChange={this.onEditorChange}
        config={/* Your existing config here */}
      />
    );
  }
}

For Function Components: #

import { useEffect, useRef } from 'react';

function YourEditorComponent() {
  const ckEditorRef = useRef(null);

  useEffect(() => {
    const editorInstance = ckEditorRef.current?.editor;
    if (!editorInstance) return;

    Object.values(editorInstance.ui._.items).forEach(item => {
      if (item.command?.name === 'fontSize' || item.command?.name === 'font') {
        item.on('click', () => {
          editorInstance.showDropdown(item);
        });
      }
    });
  }, []);

  return (
    <CKEditor
      ref={ckEditorRef}
      data={/* Your content */}
      onChange={/* Your handler */}
      config={/* Your existing config */}
    />
  );
}

4. Disable Strict Mode (Last Resort) #

Next.js's Strict Mode can cause double-rendering during development, which might interfere with CKEditor's initialization. If all else fails, try disabling it in your _app.js:

// Before (with Strict Mode)
function MyApp({ Component, pageProps }) {
  return (
    <React.StrictMode>
      <Component {...pageProps} />
    </React.StrictMode>
  );
}

// After (without Strict Mode)
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Start with fix #1 first—it resolves 90% of these Next.js/CKEditor 4 compatibility issues. If that doesn't work, move to the CSS adjustment, then the event reinitialization.

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