使用 npm 安装 CKEditor答案

【问题标题】：Installing CKEditor with npm使用 npm 安装 CKEditor
【发布时间】：2016-07-04 01:29:25
【问题描述】：

我正在尝试在我的项目中安装 CKEditor。我正在使用 Laravel。

我知道我可以下载这些文件，但我喜欢让我的生活变得困难，所以我决定安装 CKEditor 作为 npm 依赖项。

正如他们的文档 here 中所述，我将包添加到 package.json，如下所示：

"dependencies": {
    "jquery": "^1.11.1",
    "bootstrap-sass": "^3.0.0",
    "elixir-coffeeify": "^1.0.3",
    "laravel-elixir": "^4.0.0",
    "font-awesome": "^4.5.0",
    "ckeditor": "^4.5.7"
}

现在我想我必须在我的 app.coffee 中要求它，所以我尝试了：

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')

这肯定会将 ckeditor.js 脚本添加到我的 app.js 中。但是 ckeditor 似乎有自己的依赖项，例如 config.js 或 editor.css，当然服务器会为这些请求响应 404。

我怎样才能以这种方式安装 CKeditor？

谢谢！

【问题讨论】：

标签： node.js laravel ckeditor gulp laravel-elixir

【解决方案1】：

这些 CKEditor 依赖项的路径可能存在问题。我不确定您使用的是 browserify 还是其他东西，但例如在 browserify 中使用 require('ckeditor') 将导致 ckeditor.js （可能与其他 js 文件捆绑在一起）文件从与您的 app.coffee 文件相同的目录加载，而 CKEditor 依赖项在node_modules/ckeditor/ 目录中。

要告诉 CKEditor 它应该从哪个目录加载其依赖项，您可以使用CKEDITOR_BASEPATH：

window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')

您可能会查看使用开发控制台中的网络标签加载这些文件是否存在问题（例如，Chrome 中的F12）。

请注意，这不是生产环境的理想解决方案，因为您需要在服务器上使用 node_modules 文件夹。您可能应该考虑在构建/发布过程中仅将这些依赖项移动到其他文件夹（并像以前一样使用 CKEDITOR_BASEPATH 和此 production 文件夹的路径）。

【讨论】：

【解决方案2】：

打开resources/js/app.js 文件

添加以下行：

window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

然后执行 Laravel Mix 命令

npm run dev

HTML JS：

<html lang="es">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="[path]/public/app.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

【讨论】：