CKEditor 5 和图像按钮

Question

我正在尝试弄清楚如何使用 CK Editor 5 上传图像。现在我已经看到了各种不同的插件，但我想了解这对我自己是如何工作的。我注意到的是，如果我点击图片按钮，我会看到一个对话框来上传图片，然后我选择了一张图片，但没有任何反应。

根据我一直在阅读的指南和文章，我的假设是我必须将图像保存到服务器，然后将 url 返回给 ckeditor，以便它可以使用它来显示图像。

我似乎不知道该怎么做。我应该在 ckeditor js 代码中的什么位置添加自己的逻辑，以便它可以拾取上传的图像，将其发送到服务器，然后将 url 返回给 ck 编辑器？

我浏览过很多类似的文档，但我似乎找不到任何东西。

https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html

Answer 1

我正在尝试弄清楚如何使用 CK Editor 5 上传图像。现在我已经看到了各种不同的插件，但我想了解这对我自己是如何工作的。我注意到的是，如果我点击图片按钮，我会看到一个对话框来上传图片，然后我选择了一张图片，但没有任何反应。

你检查过控制台吗？在控制台上，如果您没有正确配置编辑器，您会看到如下内容：

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

现在，有两个内置的上传适配器——CKFinder's server connector 和CKEditor Cloud Services 提供的Easy Image service。两者都需要配置才能工作：

• CKFinder 适配器：https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
• 简易图片：https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image

上传适配器的作用是公开一个函数，它将文件发送到服务器（以任何它想要的方式）并在上传完成后通知编辑器（通过返回该文件的 URL）。编辑器负责其余的工作——将图像插入内容、显示进度条等。

除了使用内置适配器外，您还可以编写自己的适配器。见：

• https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
• https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src 作为简单上传适配器的示例