使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

Posted 2023-03-14

【中文标题】使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

【英文标题】：Installing plugins to CKEditor 5 in Laravel 5 with webpack

【发布时间】：2019-04-18 23:25:51

【问题描述】：

我在将插件安装到集成到 Laravel 5.6 的 CKEditor 时遇到了一个小问题。 根据 CKEditor 文档的集成指南，我能够使用 npm 将 @ckeditor/ckeditor5-build-classic 依赖项添加到项目中，并且它与 webpack 一起工作得很好。

但问题是我无法添加默认情况下不包含在 CKEditor 中的自定义插件。我正在关注 guide 添加自定义插件，但它在 laravel 本身中的 webpack 并不能很好地工作。例如，我尝试添加@ckeditor/ckeditor5-alignment，但没有成功，出现以下控制台错误。

TypeError: Cannot read property 'getAttribute' of null

我想这可能是我在设置 ClassicEditor 实例时没有添加所有必要的插件。所以我尝试了另一件事。 我已将插件安装到 ckeditor build 并获得了自定义版本。但是当我尝试使用以下语句在自定义路径中导入构建时，它没有导入。

import ClassicEditor from '../plugins/vendor/ckeditor/build/ckeditor';

如果我只是从 node_modules 中删除构建目录并复制此自定义构建，则可以使用以下语句使其工作。

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';

这不是在 node_modules 中编辑/更新的专业方法。

所以我的问题是：

如何在 Laravel 上安装自定义插件到 CKEditor？

或者如何在不自定义 node_modules 的情况下将自定义 CKEditor 构建添加到项目中？

【问题讨论】：

我运行同样的问题。我按照指南“将插件安装到编辑器”，导入很好，我的 IDE 识别插件并且编译运行顺利，但是在我的浏览器控制台中我看到：modules[moduleId] is undefined

您找到解决此问题的方法了吗？如果有，可以分享一下吗？

【参考方案1】：

我在我的 Laravel 项目中使用过 CKEditor 等工具，但我是这样做的：

我从CKEditor网站下载了js和CSS文件并解压 我将这些文件复制到我的 Laravel 项目的公共文件夹中 您可以像这样在刀片页面中访问和使用它们

<code>
   <script src="asset('js/ckeditor.js')"></script>
   <link rel="stylesheet: href="asset('js/ckeditor.js')" />
</code>