python+ueditor+ Seven Cow cloud storage consolidation

Development environment: Python pyramid.

Reference URL: http://developer.qiniu.com/docs/v6/sdk/python-sdk.html,http://my.oschina.net/duoduo3369/blog/174655

The project will integrate Ueditor into the website, but there is a problem with the picture uploading. So take the client (end user) = Seven kn + Business Server to process the picture. Detailed flow This article is written very clearly: http://my.oschina.net/duoduo3369/blog/174655, but Java, but also did not do picture display processing. The entire process is as follows:

Here are a few key steps:

Signature Generation TokenConfigure the Project Server-side request path:/ueditor/uptoken is used to generate Uptoken.

@view_defaults (route_name= ' ueditor ') class Ueditorview (object):        def __init__ (self, request):        self.request = Request        self.db = request.db        Qiniu.conf.ACCESS_KEY = "Your Access_key"        Qiniu.conf.SECRET_KEY = "Your Secret_key "        self.bucket_name=" your Seven Cow space name "    @view_config (renderer= ' Jsonp ', match_param= (' Action=uptoken '))    def uptoken (self):        policy = qiniu.rs.PutPolicy (self.bucket_name)        token= policy.token ()        return Dict (Token=token)    @view_config (renderer= ' Jsonp ', match_param= (' Action=imgmanage '))    def imgmanage (self) :        Pass

There is also a/ueditor/imgmanage used for picture management, this is not done for the time being. Use Easy_install to install the Qiniu package and import it first.
configuring Ueditor Upload RequestsThe version I'm using is the Ueditor1_2_6_1-jsp-utf8 version. To change the dialogs/image/image.html file: Add a form inside the body to upload tokens to the seven-OX server:

<input id= "Qiniu_token" type= "hidden" name= "token"/>

Add the following code to the JavaScript tag to get Uptoken to the Project Server:

        $ (function () {            $.get ("/ueditor/uptoken", function (data) {                $ ("#qiniu_token"). Val (data["token"]);            });        

Then click on the event $G ("Upload") in the Upload button to add the token parameter to the onclick:

var postparams = {                    "dir": Baidu.g ("Savepath"). Value,                    "token": $ ("#qiniu_token"). Val ()//for Qiniu Yun Token                };

Also need to change ueditor under the Ueditor.config.js file, in the Window.ueditor_config configuration to modify the image upload configuration:

Window. Ueditor_config = {        //Add a path to the editor instance, this cannot be commented        Ueditor_home_url:url        //Picture upload config area        , imageUrl: "/http/ up.qiniu.com/"            //image upload submit address,        ImagePath:" http://shikeim.qiniudn.com/"   //image correction address, which is the address of the seven Cow cloud application space        , Imagefieldname: "File"//Seven KN combination needs to be changed to file

This allows the image to be uploaded to the seven Cow cloud server as usual.Show pictures in UeditorDebugging for a long time, found image.html below a callback function object callbacks. This is the successful upload callback function:

Single File upload completed callback                uploadcompletecallback:function (data) {                    try{                        var info = eval ("(" + Data.hash + ")");                        Info && Imageurls.push (info);                        selectedimagecount--;                    } catch (e) {                    console.log ("Excetion!up load failed ...");}                ,

But the fact that the seven Qiniu image upload succeeded, but the response is Uploaderrorcallback upload failure callback function, so the original Uploaderrorcallback commented out, and re-wrote a:

Qiniu Yun upload ...                Uploaderrorcallback:function (data) {                    try{                        var info = eval ("(" + Data.info + ")");                        imgurl={normal:info[' hash '],small:info[' hash ']+ '-small '};                        Imageurls.push (Imgurl);                        Console.log (imageurls);                        selectedimagecount--;                    } catch (e) {                        console.log ("Excetion!up load failed ...");}                ,

Imgurl is the seven Qiniu returned server-side picture file name, I made a configuration on the seven cow cloud upload image has the original normal, as well as the thumbnail plate small, both returned to facilitate the editor processing. After the change to find the image can be inserted, but can not be displayed correctly, the review element found is the picture name undefined, and then see the image.js source, found that the insertion of the picture is the Insertbatch function, so the next:

/**     * Insert multiple pictures *    /function Insertbatch () {        if (Imageurls.length < 1) return;        var imgobjs = [],            align = Findfocus ("Localfloat", "name");        for (var i = 0, ci; ci = imageurls[i++];) {            var tmpobj = {};            Console.log (CI);            Tmpobj.title = Ci.title;            Tmpobj.floatstyle = align;            Fixed display time address data, if the background is returned is the absolute address of the picture, then there is no need to fix            tmpobj._src = TMPOBJ.SRC = Editor.options.imagePath + ci.small;//here using thumbnails            Imgobjs.push (tmpobj);        }        Insertimage (IMGOBJS);        Hideflash ();    }

This image upload is successfully integrated. But there are some small details that need to be perfected.
Summary has the problem first online check, check the purpose is not to find the answer, but to find ideas. Understand the idea after reading the document, the answer is in the source code.

python+ueditor+ Seven Cow cloud storage consolidation