laravel - 如何在 Laravel 8 Jetstream 上使用 NPM 安装 CKEditor

问题描述

我迷失在让 CKEditor 5 在 Laravel 8 Jetstream 中工作的斗争中。

我已经使用 npm 安装了它（以后我不希望 CDN 用于生产模式）。

我是如何安装的

npm我在 Laravel 项目的根文件夹中执行了以下命令：

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 未加载），我收到以下日志错误：

未捕获的 ReferenceError：未定义 ClassicEditor

我还尝试了什么

奇怪的是，如果我这样调用 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，它说它是重复的！

唯一可行的方法是仅通过删除

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

部分，从app.js文件中并npm run dev再次。

我的问题

我错过了什么？如何使其与 NPM 安装一起使用？

标签： laravelnpmckeditorckeditor5