KindEditor pictures are uploaded to Qiniu Cloud

I made a website myself. I use KindEditor as the editor. I usually upload pictures that come with KindEditor. However, the server uses a virtual host and there is not much space. I have been thinking about putting the pictures in free cloud storage space. , before I looked at the source code of KindEditor and Qiniu’s SDK, I was confused, and there was no similar solution when searching online, so I had to continue to look at the source code and do it myself. After working on it for a whole night, I basically realized it. Let’s talk about it. How to do it:

Version description:

KindEditor version: 4x

Qiniu SDK: 7.x.x

Backend script: PHP

First, take a look at the form template given by Qiniu. Here, the two form items file and token are required

1. Modify the plugins/image/image.js file of KindEditor

In line 20, change the name field of the uploaded file to be consistent with Qiniu, that is, name="file". The commented line is the original code

The second change is local For the image upload part, here we only make local image upload modifications. Others are similar, including file upload. Change the action address to Qiniu's upload entrance: http://upload.qiniu.com/, The original processing address is /php/upload_json.php

Add a hidden form item:

As for the file item, you can’t see it here because it is loaded separately, which is hiddenElements.join(''); This, just change the name of the file before

At this point, we have added the basic form items to KindEditor, but the token does not have a value now. The next step is to implement ajax to obtain the token from the server

My approach is to write directly at the end of the image.js file There is a function to obtain the token:

Because it is an asynchronous method, I have to use jQuery to change the value of the above token. Of course, it would be better to use native js to implement it without having to load jQuery. , I use getElementById to directly set the value, but it seems that it doesn’t work. After struggling for a long time, I don’t know why. Originally, jQuery used the val() method and it didn’t work, so I had to use attr()

The above is the callback function after uploading. The returned data is in json format with two parameters. Of course, a program to process the callback will be added later. The number of callback parameters can be set by yourself. Successful upload:

{"error":0,"url":"https://dn-lanbaidiao.qbox.me/FryyQrpKYDDZrkJGWchh9_9og6Du"}

Upload failed:

{"error":1,"message":"xxx error message"}

ps, this function does not need to be modified in any way, it depends on personal circumstances, here is just an explanation

At this point, KindEditor has been modified. The next step is to modify Qiniu’s php file and add a callBack.php and getToken.php

2. Modification of back-end code First download Qiniu’s SDK source code. I am using PHP here: Qiniu SDK (PHP version)

Directory The structure is like this

Mainly modify the src/Qiniu/Auth.php file, and add

callBack.php and getToken.php in the same directory, that is

#1 Auth.php

The main thing is to add a callback file that can handle the upload event by itself, that is, callBack.php. What should be noted here is that the callback address must be under the same domain name as the website address, otherwise js will report a cross-domain error, because KindEditor uses frame To handle image uploading, this is why I don’t directly use Qiniu’s callback but write one myself. I pondered here for a long time before I found out

The prerequisite for using my own callback is to make Qiniu’s callback address jump Go to your callback address and pass the callback parameters to your callback program, so add a returnUrl

Next, write getToken.php to generate your Qiniu token. If you don’t know how Qiniu is used, It is recommended to read the official documentation first: Qiniu Document

and then callBack.php (replacing the function of the original kindEditor’s upload_json.php

), and set the parameters according to the situation, but it must be combined with image.js Maintain consistency

Finally, use kindEditor to test the image upload. The address has changed to the address of Qiniu Cloud Storage, which greatly reduces the pressure on your server traffic and storage space

The above introduces the uploading of KindEditor pictures to Qiniu Cloud, including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.