javascript-CKEditor 5和“图像”按钮

我试图弄清楚如何使用CK Editor 5上传图像.现在,我已经看到了各种不同大小的插件,但是我想学习一下它对自己的作用.我注意到的是,如果单击图像按钮,将出现一个对话框以上传图像,然后选择图像,但没有任何反应.

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

我似乎不知道该怎么做.我在ckeditor js代码中的哪里添加我自己的逻辑,以便它可以拾取上载的图像,将其发送到服务器,然后将网址返回给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

解决方法:

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 connectorCKEditor 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作为简单上传适配器的示例

上一篇:ckeditor5 使用第一天 下载并加载居中,居左,居右功能


下一篇:CKEditor 5 npm方式安装调用与配置教程