KindEditor images uploaded to qiniu cloud, kindeditor niuyun

KindEditor images uploaded to qiniu cloud, kindeditor niuyun

I made a website by myself. The editor uses KindEditor, which usually involves uploading pictures of KindEditor, but the server uses a VM and has little space, I have been thinking about placing images in a free cloud storage space. before reading the source code of KindEditor AND THE sdks of qiniu, there is no similar solution for online search, I had to continue to read the source code and complete it for the whole night. The following describes my practices:

Version description:

KindEditor version: 4x

Qiniu SDK: 7.x. x

Backend Script: PHP

Let's take a look at the form template provided by qiniu. Here file and token are required.

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

Change the name field of the uploaded file to be the same as that of qiniu, that is, name = "file". The line Annotated is the original code.

The second change is the local Image Upload part. Only Local Image Upload modifications are made here. Others are similar, including file upload.

Change the action address to the upload entry of qiniu: http://upload.qiniu.com/. the original address is /php/upload_json.php.

Add a hidden form item: <input name = "token" class = "qiniu_token" value = "" style = "display: none;"/>

The file item cannot be seen here because it is loaded separately, that is, hiddenElements. join (''); this, the file name has been changed 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 practice is to directly write a token function at the end of the image. js file:

Because it is asynchronous, I have to use jQuery to change the value of the token above. Of course, it is better to use native js to implement it without loading jQuery, I used getElementById to directly set the value. It seems that I cannot set the value. After a long time, I don't know why. Originally, jQuery's val () method didn't work, so I had to convert it to attr ()

The above is the callback function after uploading. The returned data is in json format and has two parameters. Of course, the callback processing program is added later. You can set the number of callback parameters.

Uploaded successfully:

{"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, depending on your situation, here is just a description

Here, KindEditor is modified. Next, modify the php file of qiniu and add callBack. php and getToken. php.

2. Modify the backend code

First download the SDK source code of qiniu. I am using PHP: qiniu SDK (PHP version)

The directory structure is as follows:

Modify the src/Qiniu/Auth. php file and add callBack. php and getToken. php in the same directory, that is

#1 Auth. php

Add a callBack file that can handle upload events by yourself, that is, callBack. php.Note:The callback address must be under the same domain name as the website address, otherwise js will report a cross-origin error because KindEditor uses frame to process image uploads, this is why I did not directly use the callback of qiniu but wrote one by myself. I have been pondering it for a long time before I found out

The premise of using your own callback is to let the callback address of qiniu jump to your callback address, and pass the callback parameter to your callback program, so add a returnUrl

Next, write getToken. php to generate your qiniu token. If you do not know how to use qiniu, we recommend that you first go to the official documentation: qiniu documentation.

Then callBack. php (instead of the previous kindEditor upload_json.php function), set the parameters as needed, but maintain consistency with image. js

Finally, we use kindEditor to test an upload. The address has changed to the address of qiniu cloud storage, which greatly reduces the traffic and storage space pressure on our servers.