CKEditor 5 和图像按钮

Question

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

根据我一直在阅读的指南和文章，我的假设是我必须将图像保存到服务器，然后将 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

现在，有两个 built-in 上传适配器 – 用于 CKFinder's server connector and for the Easy Image service provided by 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 到这个文件）。编辑器负责剩下的工作——将图像插入内容、显示进度条等。

除了使用 built-in 适配器外，您还可以编写自己的适配器。参见：

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