如何安装 CKEditor 5 自动保存插件？答案

【问题标题】：How to install CKEditor 5 autosave plugin?如何安装 CKEditor 5 自动保存插件？
【发布时间】：2021-07-27 12:36:03
【问题描述】：

我需要集成 CKEditor 5 自动保存插件。目前，我已经包含了 CKEditor，如下所示。

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js">
</script>

但是，它没有找到自动保存插件，所以我想我需要在我的网站上安装 CKEditor 和插件才能运行它。

问题在于，在 CKEditor 文档中，仅使用 npm 描述了安装。所以我不知道如何在没有 npm 的情况下安装插件。在 CKEditor 4 中，我只需要将插件粘贴到 plugins 文件夹中，我认为这就是一切。

我的网站是使用 Laravel Boilerplate 使用 Laravel 框架开发的。我有一个 webpack.mix.js 文件，其中包含一些 npm 包的配置。不幸的是，我无法包含 CKEditor 和 Autosave 插件并运行它们。

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('public')
    .setResourceRoot('../') // Turns assets paths in css relative to css file
    .sass('resources/sass/frontend/theme.scss', 'css/frontend/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
    .js('resources/js/frontend/app.js', 'js/mix/frontend.js')
    .js('resources/js/backend/app.js', 'js/mix/backend.js')
    .extract([
        'alpinejs',
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: 'inline-source-map'
    });
}

我现在只需要前端的 CKEditor。如果有人能告诉我如何在有或没有 npm 的情况下集成它，我将不胜感激。

【问题讨论】：

标签： javascript laravel npm webpack ckeditor

【解决方案1】：

要使用 npm 安装 CKEditor 5，请尝试使用 @ckeditor/ckeditor5-build-classic 包。

npm install --save-dev @ckeditor/ckeditor5-build-classic

此外，您还需要 jQuery。

npm install --save-dev jquery

在 bootstrap.js 中...

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
} catch (e) {
    console.error(e);
}

编译你的资产。

npm run prod

这是一个 Blade 示例。

<html>
<head>
    <title>CKEditor 5 Laravel 8 Example</title>
    <script src="{{ mix('js/app.js') }}"></script>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen pt-8">
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
</div>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error.stack);
        });
</script>
</body>
</html>

至于 Autosave 插件，我假设您需要一个数据库，所以我没有尝试这部分。但是一开始，你可以这样安装...

npm install --save-dev @ckeditor/ckeditor5-autosave

从那里咨询Autosave plugin documentation。

【讨论】：