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

我试图弄清楚如何使用 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 的服务器连接器和CKEditor 云服务提供的Easy Image服务。两者都需要配置才能工作：

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