使用 npm 安装 CKEditor

Question

我正在尝试在我的项目中安装 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？

谢谢！

Answer 1

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

要告诉 CKEditor 它应该从哪个目录加载它的依赖项，你可以使用 CKEDITOR_BASEPATH:

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

您可能会看到使用开发控制台中的网络选项卡加载这些文件是否存在问题（例如 F12 在 Chrome).

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

Answer 2

打开 resources/js/app.js 文件

添加以下行：

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

然后执行Laravel混合命令

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>

使用 npm 安装 CKEditor

Installing CKEditor with npm

ckeditor

node.js

laravel

gulp

laravel-elixir