vuejs2 - 如何通过脚本包含使用 CKEditor5 (Vue2) 插件？

Question

我将 CKEditor5 与 Vue2 一起使用。在我的 webpack 构建中使用“导入”给我带来了很多挑战。这些挑战涉及：

• 无法解析某些文件类型。
• 试图升级我的包。
• 将配置部分添加到 webpack 配置文件。
• 由于包解析内容的方式发生了重大变化，因此必须修复我的 css 中的图像引用。
• 看到我的 dist 文件夹中弹出了一些png 文件，但其他没有。（为什么？）
• 最终遇到一个通用错误，我找不到可用的解决方案。
• 不明白我在做什么。

我现在没有时间学习更好的 webpack。我想通过脚本包含继续使用 CKEditor5。

到目前为止，没有插件，这不是问题。现在，我想使用插件。但是我的插件包含导致错误。

我的页面上有：

<script src="~/lib/CKEditor5/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="~/lib/CKEditor5/ckeditor5-vue2/dist/ckeditor.js"></script>

我的 Vue 组件可以：

Vue.use(CKEditor);

它还拥有 CKEditor5 Vue2 组件（editor、editorConfig）所需的所有数据道具。

这总是给了我一个工作的CKEditor5。

现在我还想包含 Image 插件，这样我就可以从 URL 插入图像。所以我这样做：

<script src="~/lib/CKEditor5/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="~/lib/CKEditor5/ckeditor5-image/build/image.js"></script>
<script src="~/lib/CKEditor5/ckeditor5-vue2/dist/ckeditor.js"></script>

image.js 现在抛出一个控制台错误：

image.js:5 Uncaught TypeError: i(...) is not a function
    at Object.window.CKEditor5.image (image.js:5)
    at i (image.js:5)
    at Module.<anonymous> (image.js:5)
    at i (image.js:5)
    at window.CKEditor5.image (image.js:5)
    at image.js:5

MediaEmbed 插件也是如此，这可能不是巧合，这可能意味着我做错了什么。

我从官方文档中了解到，他们宁愿看到您使用 import 语句，但他们确实演示了如何将它与脚本包含一起使用。

如果可以使用主要的 CKEditor5 组件来做到这一点，那么肯定也可以使用插件来做到这一点吗？但没有这样的例子！

如何通过脚本包含来包含和使用 CKEditor5 插件？

标签： vuejs2ckeditorckeditor5