Kindeditor picture uploaded to seven cow cloud

oneself made a website, the editor used is kindeditor, usually involves the kindeditor comes with the picture upload, but the server uses the virtual host, does not have much space, has been thinking to put the picture in the free cloud storage space, Before looking at Kindeditor Source and seven Ox SDK see foggy, online Search and no similar solution, had to continue to see the source of their own, got a whole night, basically realized, the following said my approach:

Release Notes:

Kindeditor Version: 4x

Seven Ox sdk:7.x.x

Back-end script: PHP

Let's take a look at the form template given by the seven bull, where both the file and token form items are required

1. Modify the Kindeditor plugins/image/image.js file

In line 20th here, the name field of the uploaded file is changed to the same as seven kn, that is, the name= "file", the comment line is the original code

The second change is the local image upload section, where only local image upload changes, the others are similar, including file upload

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

To add a hidden form item:

As for the file entry, it is not visible because it is loaded separately, that is Hiddenelements.join ("); this, the name of the file has been changed in front of it.

Here we have added the basic form items to the Kindeditor, but token does not now have value, and the next step is to implement Ajax to get tokens from the server.

My approach is to write a function that gets the token directly 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, with the native JS implementation will be better, do not have to load jquery, I use getElementById to directly set the value of the seemingly no, toss for a long time do not know what reason , jquery's use of Val () method also does not work, had to give into attr ()

The above is the post-upload callback function, the returned data is in JSON format, two parameters, of course, after the addition of processing callback program, the number of callback parameters can be set by themselves

Upload success:

{"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 make any changes, depending on the individual circumstances, here is just a description

Here, Kindeditor is done, and the next step is to modify the php file for seven kn and add a callback.php and gettoken.php

2. Modification of Backend code

First download the seven Ox SDK source code, I use PHP here: seven kn SDK (PHP version)

The directory structure is like this

The main modification src/qiniu/auth.php this file, and in the same directory add callback.php and gettoken.php, that is

#1 auth.php

The main thing is to add a callback file that can handle the upload event yourself. That is, callback.php, here is to note that the callback address must be the same domain name as the site address, or JS will report cross-domain error, because kindeditor use frame to handle the image upload, which is why I do not directly with the seven bull callback but I wrote a, I spent a long time to find out

The premise of using your own callback is to have the callback address of the seven bull jump to your callback address and pass the callback parameter to your callback program, so add a ReturnUrl

Next write gettoken.php that will generate your seven cattle token, if you do not know the use of seven cattle principle, it is recommended to go to the official documents: Seven cow document

Then is callback.php (instead of the original kindeditor of the role of upload_json.php), you set the parameters according to the situation, but to maintain consistency with image.js

Finally with Kindeditor test a piece of upload, address has become the address of seven cow cloud storage, greatly reduce their own server traffic and storage space pressure

The above describes the Kindeditor image uploaded to seven cattle cloud, including the content of the area, I hope that the PHP tutorial interested in a friend helpful.

