如何解决jQuery动态添加textarea的CKEditor初始化跨文件调用问题？

针对动态添加的textarea无法初始化CKEditor，同时要保留独立初始化模块的问题，提供三个可行方案：

方案1：将初始化方法暴露到全局（兼容非模块脚本） #

保持init-ckeditor.js的ES模块类型，同时把初始化方法挂载到window对象，让product.js可以直接调用：

// init-ckeditor.js (type="module")
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// 按需导入其他CKEditor插件

// 核心初始化方法
export function initEditor(textareaElement) {
  ClassicEditor
    .create(textareaElement, {
      plugins: [Essentials], // 配置你的插件列表
      toolbar: ['bold', 'italic'] // 配置工具栏
    })
    .catch(error => {
      console.error('CKEditor初始化失败:', error);
    });
}

// 暴露到全局，供非模块脚本调用
window.initCKEditor = initEditor;

// 初始化页面已有的textarea
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('textarea.ckeditor').forEach(el => initEditor(el));
});

在product.js中，动态添加textarea后直接调用全局方法：

// product.js
document.getElementById('add-btn').addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  textarea.classList.add('ckeditor');
  document.getElementById('form').appendChild(textarea);
  
  // 调用全局初始化方法
  window.initCKEditor(textarea);
});

方案2：将product.js改为ES模块（规范的模块调用） #

如果product.js可以改为ES模块，直接通过import导入初始化方法，避免全局污染：

// product.js (type="module")
import { initEditor } from './init-ckeditor.js';

document.getElementById('add-btn').addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  textarea.classList.add('ckeditor');
  document.getElementById('form').appendChild(textarea);
  
  initEditor(textarea);
});

HTML中引入脚本时都要声明type="module"：

<script type="module" src="./init-ckeditor.js"></script>
<script type="module" src="./product.js"></script>

方案3：动态导入模块（无需修改现有脚本类型） #

如果product.js必须保持普通脚本类型，使用动态导入加载init-ckeditor.js并获取初始化方法：

// product.js
document.getElementById('add-btn').addEventListener('click', async () => {
  const textarea = document.createElement('textarea');
  textarea.classList.add('ckeditor');
  document.getElementById('form').appendChild(textarea);
  
  // 动态导入模块
  const ckeditorModule = await import('./init-ckeditor.js');
  ckeditorModule.initEditor(textarea);
});

init-ckeditor.js只需正常导出initEditor即可，无需额外修改。

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