【发布时间】：2021-10-24 05:11:16
【问题描述】：
我正在努力让 CKEditor 5 在 Laravel 8 Jetstream 中工作。
我已经使用 npm 安装了它（以后我不想 CDN 用于生产模式）。
我是如何安装的
我在我的 Laravel 项目的根文件夹中执行了以下 npm 命令：
npm install @ckeditor/ckeditor5-build-classic --save-dev
然后，在我添加的app.js 文件中：
/** CKEditor 5*/
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
然后，在我需要它的视图中，如下所示：
{{--Content--}}
<div>
<x-jet-label value="Content" />
<textarea wire:model="post.content" rows="6" class="form-control w-full" id="editor"></textarea>
</div>
...
@push('js')
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
@endpush
我跑了 npm run dev：
npm run dev
之后我看到以下消息：
webpack compiled successfully
它不起作用
但是，当我访问页面并查看检查元素时（因为我看到 CKEditor 未加载），我收到以下日志错误：
Uncaught ReferenceError: ClassicEditor is not defined
我还尝试了什么
奇怪的是，如果我这样调用 CDN：
@push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
@endpush
现在我得到一个不同的错误，调用它两次！：
未捕获的 CKEditorError: ckeditor-duplicated-modules
什么有效
如果我只使用 CDN，它确实有效。但是，从 NPM 方法来看，它没有。如果我只离开 NPM，它会说它是未定义的。如果我添加 CDN，它说它是重复的！
唯一可行的方法是仅通过删除 CDN 来使用
/** CKEditor 5*/
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
部分，来自app.js 文件和npm run dev 再次。
我的问题
我错过了什么？如何使其与 NPM 安装一起使用？
【问题讨论】：
-
你试过
import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic/build/ckeditor';吗？ -
嗨，好吧，我试过了，但仍然收到
Uncaught ReferenceError: ClassicEditor is not defined错误。否则，我是否错过了app.blade.php布局中的一些设置以将其传递给我的其余视图？
标签： laravel npm ckeditor ckeditor5