使用 NPM 和 Laravel Mix 时 CKEDITOR 的基本路径不正确答案

【问题标题】：CKEDITOR has incorrect basepath when using NPM & Laravel Mix使用 NPM 和 Laravel Mix 时 CKEDITOR 的基本路径不正确
【发布时间】：2018-02-12 00:14:43
【问题描述】：

当我尝试使用 NPM 将 CKEDITOR 包含到我的新 Laravel 5.5 项目中时，我在 Chrome 控制台中收到以下错误（对 local.dev 使用 laravel Valet）：

app.js:16991 GET https://local.dev/chart/config.js?t=H7HG 
app.js:16991 GET https://local.dev/chart/skins/moono-lisa/editor.css?t=H7HG 
app.js:16991 GET https://local.dev/chart/lang/en.js?t=H7HG

我的 Laravel Mix 设置如下所示：

mix.js('resources/assets/js/app.js', 'public/js')
  .babel(['resources/assets/js/libraries/*.js'], 'public/js/vendor.js')
  .version();

我的 CKEDITOR 安装位于：

/vendor/ckeditor/ckeditor

我可以在网站加载后访问 CKEDITOR 实例。但是，如上所示，当我导航到 https://local.dev/chart 时，CKEDITOR 现在会查找在其基本路径后附加 /chart 的 config、skin 和 lang 文件。

我做了一些研究，发现了一些相关问题，并且能够成功地使用asset() 更改base_path。相关stackOverflow问题可以在here和here找到。

我想做的是通过 NPM 拉入 CKEDITOR，使用 Laravel Mix 组合、版本和缩小我的脚本（一个用于供应商库，一个用于我的应用程序特定的 JS），然后输出这两个.js文件到 laravel 应用程序中的这些目录：

 /public/js/vendor.js
 /public/js/app.js

Laravel mix 生成这两个文件，构建成功，并且所有其他库都运行良好。但是，CKEDITOR 丢失了它的基本路径并在寻找皮肤/语言/config.js 时抛出错误——知道如何调整 CKEDITOR 的 basePath 以指向供应商文件，以便它停止发出这些错误并正常工作吗？

提前感谢您提供的任何帮助！

【问题讨论】：

标签： laravel-5 npm ckeditor

【解决方案1】：

对于那些和我有同样问题的人，我找到了一个完全不涉及修改 CKEDITOR 的解决方法：

使用 Webpack 复制所需的 CKEDITOR 文件：

.copy('node_modules/ckeditor/config.js', 'public/js/ckeditor/config.js')
.copy('node_modules/ckeditor/styles.js', 'public/js/ckeditor/styles.js')
.copy('node_modules/ckeditor/contents.css', 'public/js/ckeditor/contents.css')
.copyDirectory('node_modules/ckeditor/skins', 'public/js/ckeditor/skins')
.copyDirectory('node_modules/ckeditor/lang', 'public/js/ckeditor/lang')
.copyDirectory('node_modules/ckeditor/plugins', 'public/js/ckeditor/plugins')

然后，在页面正文中，添加：

<script> var CKEDITOR_BASEPATH = '/js/ckeditor/'; </script>

这将允许 CKEDITOR 找到所需的文件。这对我来说有点难看，所以也许有更好的方法来做到这一点 - 如果是这样，请让我知道并否决这个答案。

【讨论】：

【解决方案2】：

由于我无法添加评论，只是想提供一种替代方式

<script> var CKEDITOR_BASEPATH = '/js/ckeditor/'; </script>

在您的 app.js 中，您可以执行以下操作而不是上述操作：

 window.CKEDITOR_BASEPATH = '/js/ckeditor/';

【讨论】：

【解决方案3】：

这个错误对我来说是，但我更改了代码并且问题正在解决。在比编写代码 webpack.mix.js 之后，只是：在你的 app.js 或 bootstrap.js 之后需要或导入，写下这段代码：

CKEDITOR.basePath = '/admin/ckeditor/'

我希望问题得到解决。谢谢。

【讨论】：