CKEditor 5和图像按钮 [英] CKEditor 5 and Image Button
问题描述
我试图弄清楚如何使用CK Editor 5上传图像。现在，我已经看到了各种不同大小的插件，但是我想学习一下它对自己的作用。我注意到的是，如果单击图像按钮，则会出现一个对话框以上传图像，然后选择图像，但没有任何反应。
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.
根据指南和我一直在阅读的文章，我的假设是我必须将图像保存到服务器，然后将URL返回给ckeditor，以便它可以使用它来显示图像。
Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.
我似乎不知道该怎么做。我会在ckeditor js代码的何处添加我自己的逻辑，以便它可以拾取上载的图像，将其发送到服务器，然后将网址返回给ck编辑器？
What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?
我已经看过很多这样的文档，但是我似乎什么也找不到。
I've been through a lot of documentation such as this, but I can't seem to find anything.
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
推荐答案
我试图弄清楚如何使用CK Editor 5上传图像。我看到了各种插件的整体大小，但是我想学习一下它对自己的作用。我注意到的是，如果单击图像按钮，则会出现一个对话框以上传图像，然后选择图像，但没有任何反应。
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.
您检查控制台了吗？在控制台上，如果没有正确配置编辑器，则将具有以下内容：
Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:
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云服务提供。两者都需要配置才能工作：
Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:
- 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
- CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
- Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image
上载适配器的作用是公开一个函数，该函数会将文件发送到服务器（以其所需的任何方式），并在完成上载后通知编辑器（通过将URL返回此文件）。编辑器会处理其余的工作–将图像插入内容，显示进度条等。
The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.
除了使用内置适配器之外，您还可以编写自己的适配器一。请参阅：
Besides using the built-in adapters, you can write your own one. See:
- https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
- https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src 作为简单上传适配器的示例
- https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
- https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter
这篇关于CKEditor 5和图像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
