CKEditor4模态框二次加载失效求助：仅加载ckeditor.js

I’ve run into this exact issue before with CKEditor and dynamic content in modals—let’s break down why this happens and how to fix it:

Why This Occurs #

When you first load page1 via your modal, the browser pulls down all CKEditor assets (core JS, plugins, styles, etc.). On the second load, your browser caches ckeditor.js (so it doesn’t re-download it), but CKEditor’s global initialization logic (which registers plugins, sets up core functionality) only runs once—when the script is first executed. Since the dependent plugin files aren’t reloaded (and don’t need to be), but the editor instance isn’t properly cleaned up or reinitialized, CKEditor fails to start the second time around.

Step-by-Step Solutions #

1. Preload CKEditor in Your Parent Page (page2)

Instead of loading CKEditor from page1, add the core ckeditor.js script to page2’s <head> once. This ensures the full CKEditor environment is available globally, no matter how many times you open the modal:

<!-- Add this to page2's <head> -->
<script src="/path/to/ckeditor/ckeditor.js"></script>

2. Manually Initialize & Destroy CKEditor with Modal Events

Materialize modals have built-in events you can hook into to manage the editor lifecycle:

• On modal open: Load page1’s content, then explicitly initialize CKEditor.
• On modal close: Destroy the CKEditor instance and clear the modal content to avoid conflicts.

Here’s a code example using vanilla JS (you can adapt this to jQuery if you’re using it):

document.addEventListener('DOMContentLoaded', function() {
  const modalElement = document.getElementById('your-modal-id');
  const modalInstance = M.Modal.init(modalElement, {
    // Triggered when the modal starts opening
    onOpenStart: function() {
      // Fetch page1 content via AJAX (instead of relying on PHP to inject it directly)
      fetch('page1.php')
        .then(response => response.text())
        .then(html => {
          // Inject page1 content into the modal
          modalElement.querySelector('.modal-content').innerHTML = html;
          // Initialize CKEditor on your textarea/element
          CKEDITOR.replace('your-editor-element-id');
        });
    },
    // Triggered when the modal finishes closing
    onCloseEnd: function() {
      // Destroy the CKEditor instance if it exists
      const editor = CKEDITOR.instances['your-editor-element-id'];
      if (editor) {
        editor.destroy();
      }
      // Clear the modal content to remove old DOM elements
      modalElement.querySelector('.modal-content').innerHTML = '';
    }
  });
});

3. Ensure Clean DOM Removal

Make sure when you close the modal, any leftover DOM elements from page1 are fully removed. If you’re using PHP to load page1 directly into the modal without AJAX, double-check that the modal’s content container is emptied before reloading the content—otherwise, you might have duplicate editor elements causing conflicts.

Quick Check #

If you still run into issues, open your browser’s dev tools:

• Go to the Network tab and check the CKEditor asset requests on the second modal open—you’ll see ckeditor.js is pulled from cache, not reloaded.
• Check the Console tab for errors like "CKEditor is not defined" or instance conflicts—these will point you to remaining cleanup/initialization gaps.

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