Django is a good web development framework based on Python. Ueditor is a rich text editor for Baidu Open source. Have a good user experience, very suitable for the Chinese to use an editor.
Before using Ueditor, I have integrated fckeditor, CKEditor. Basically no difficulty. But the function is not ueditor powerful. This creates the idea of integrating Ueditor with Django.
Check out the official Baidu documentation and examples that are available only in the java,php,.net version of the example, and do not have Python, or Django examples. So you can only build the wheels yourself. Rich Text editor, just a JS framework, and the background is basically no relationship. The background is just responding to HTTP requests, processing, and returning results. So it should be easy to do it with Django, so start working on it.
Download Baidu Ueditor
This is needless to say, the earth people know, Baidu will know. Note that I downloaded the Java utf-8 version because there is no Django version, so you can download a full version of your own.
Make an HTML template page, in the Head section, that contains the following (the path should be changed to suit your own):
Program code
<script type= "Text/javascript" charset= "Utf-8" >
Window. Ueditor_home_url = "/static/js/ueditor/";
</script>
<script type= "Text/javascript" charset= "Utf-8" src= "/static/js/ueditor/editor_config.js" ></script>
<script type= "Text/javascript" charset= "Utf-8" src= "/static/js/ueditor/editor_all_min.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "/static/js/ueditor/themes/default/ueditor.css"/>
The body of the template can be the following content, between <body> and </body>:
Program code
<textarea id= "Content" name= "content" style= "width:575px;line-height:18px;" ></textarea>
At the end of the HTML template, before </body>, add the following code:
Program code
<script>
var ue=new UE.ui.Editor ();
Ue.render (' content ');
</script>
To this end, the template configuration is complete. Configure a URL path in the urls.py file of the Django project to access the template page and you can now see that the editor is loaded successfully:
This is, click Upload Picture icon, you can see with local upload, select multiple pictures, but can not upload, the reason is very simple, no background response. So I need some Django backstage to handle this.
Create a new app, like Ueditor, and look at my engineering structure:
Create a views.py file inside, the code is as follows:
Program code
#coding: Utf-8
'''
Created on 2012-8-29
@author: yihaomen.com
'''
From Xieyin Import settings
From django.http import HttpResponse, Httpresponseredirect
From DJANGO.VIEWS.DECORATORS.CSRF import csrf_exempt
Import Image
Import OS
Import time
Import Urllib2
Import UUID
def __myuploadfile (Fileobj, Source_pictitle, source_filename,fileorpic= ' pic '):
"" "" "" "" for a common upload file.
Myresponse= ""
If Fileobj:
filename = FileObj.name.decode (' utf-8 ', ' ignore ')
Fileext = Filename.split ('. ') [1]
file_name = str (UUID.UUID1 ())
subfolder = Time.strftime ("%y%m")
If not os.path.exists (settings. MEDIA_ROOT[0] + subfolder):
Os.makedirs (settings. MEDIA_ROOT[0] + subfolder)
Path = str (subfolder + '/' + file_name + '. ' + fileext)
If Fileext.lower () in (' jpg ', ' jpeg ', ' BMP ', ' gif ', ' png ', "rar", "Doc", "docx", "Zip", "pdf", "TXT", "SWF", "WMV"):
Phisypath = settings. MEDIA_ROOT[0] + path
Destination = open (Phisypath, ' wb+ ')
For chunk in Fileobj.chunks ():
Destination.write (Chunk)
Destination.close ()
If fileorpic== ' pic ':
If Fileext.lower () in (' jpg ', ' jpeg ', ' BMP ', ' gif ', ' png '):
im = Image.open (phisypath)
Im.thumbnail ((720, 720))
Im.save (Phisypath)
Real_url = '/static/upload/' + subfolder + '/' + file_name + '. ' + Fileext
Myresponse = ' {' original ': '%s ', ' url ': '%s ', ' title ': '%s ', ' state ': '%s '} '% (Source_filename, Real_url, Source_pictitle, ' SUCCESS ')
Return Myresponse
@csrf_exempt
def ueditor_imgup (Request):
"" Upload Picture "" "" "
Fileobj = Request. Files.get (' Upfile ', None)
Source_pictitle = Request. Post.get (' Pictitle ', ')
Source_filename = Request. Post.get (' fileName ', ')
Response = HttpResponse ()
Myresponse = __myuploadfile (Fileobj, Source_pictitle, Source_filename, ' pic ')
Response.Write (Myresponse)
return response
@csrf_exempt
def ueditor_fileup (Request):
"" Upload file "" "
Fileobj = Request. Files.get (' Upfile ', None)
Source_pictitle = Request. Post.get (' Pictitle ', ')
Source_filename = Request. Post.get (' fileName ', ')
Response = HttpResponse ()
Myresponse = __myuploadfile (Fileobj, Source_pictitle, source_filename, ' file ')
Response.Write (Myresponse)
return response
@csrf_exempt
def ueditor_scrawup (Request):
"" "Graffiti file, handling" ""
Pass
So far, just contact Ueditor, time is limited, I did upload files and pictures. Graffiti, grasping remote pictures, etc., I will add when I have time.
Configuring in urls.py
Program code
URL (r ' ^ueditor_imgup$ ', ' XieYin.app.Ueditor.views.ueditor_ImgUp '),
URL (r ' ^ueditor_fileup$ ', ' XieYin.app.Ueditor.views.ueditor_FileUp '),
Revise Baidu ueditor config file: editor_config.js
Program code
, imageurl:url+ "jsp/imageup.jsp"
, ImageUrl: "/ueditor_imgup"
Picture Upload Submit Address
, ImagePath: ""
Attachment Upload Configuration Area
, FileUrl: "/ueditor_fileup"//attachment upload submit Address
, FilePath: ""
Start the Django program
Go to the page just now, choose upload Picture.
To this, the image upload success, in fact, the same file, but the type is different just.
Attention
The program does implement the inheritance uploaded to Ueditor. But security has not been taken into account, such as a session check. Need, can add yourself.
The previous article mentioned that Django and Baidu Ueditor combined to achieve file upload, image upload. However, the following features are not implemented:
