javascript - 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

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.

你检查控制台了吗？在控制台上，如果您没有正确配置编辑器，您会看到类似这样的内容:

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和 Easy Image service由 CKEditor Cloud Services 提供.两者都需要配置才能工作:

• 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作为一个简单的上传适配器的例子