如何在Laravel 8 Jetstream中通过NPM安装使用CKEditor 5

你遇到的ClassicEditor is not defined错误核心是脚本加载顺序/挂载时机不匹配，加上导入配置的细节问题导致的；重复模块错误是因为同时引入NPM版本和CDN版本的CKEditor产生冲突，直接删掉所有CDN引用即可。

• 第一步：修正app.js导入代码
  不需要指定build目录下的文件，直接用简化的包导入路径即可：

  /** CKEditor 5*/
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  window.ClassicEditor = ClassicEditor;
  

• 第二步：调整布局文件的脚本加载顺序
  打开Jetstream默认布局文件（通常是resources/views/layouts/app.blade.php），确保编译后的app.js引入位置在@stack('js')之前，示例配置：

  <!-- 先引入编译后的app.js -->
  <script src="{{ mix('js/app.js') }}"></script>
  <!-- 再加载所有push到js栈的自定义脚本 -->
  @stack('js')
  

  如果你给app.js加了defer属性，要么给初始化脚本的script标签也加defer，要么把初始化逻辑包裹在DOM加载完成事件中，避免提前执行：

  @push('js')
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              ClassicEditor
                  .create( document.querySelector( '#editor' ) )
                  .catch( error => {
                      console.error( 'CKEditor error: '+error );
                  } );
          })
      </script>
  @endpush
  

• 第三步：重新编译资源
  执行命令重新编译前端资源：

  npm run dev
  

  编译完成后清理浏览器缓存再访问页面测试即可。

• 如果你已经把Laravel 8的前端构建工具从Laravel Mix换成了Vite，要把app.js的引入改成Vite对应指令@vite(['resources/js/app.js'])，加载顺序规则和上面一致。
• 全程不要同时保留NPM安装的CKEditor和CDN引用，避免重复模块冲突。

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