Django Integrated Baidu Rich text editor Ueditor Raiders _python

First from the Ueeditor official website Download the latest version of the package, the current official online provides ASP,. NET, PHP, JSP version, Django version only a third party developed, but see the configuration is slightly more complicated.

Here does not introduce the use of ueditor, but also explain the Ueditor configuration method, the official web has detailed documentation and API introduction, download the demo also has a common method of sample code, here is mainly about ueditor and Django integration needs to modify the place.

Download any version of this here, because we only need to put the Ueeditor front-end part of the extraction, as for the backend server, we develop our own implementation.

In fact, most of the features in Ueditord are available in Django, only uploading files, pictures, videos, online pictures, online files This part of the relationship with the upload is not useful, because these features need to support the background processing program, so we do, is to use Python to implement this part of the processing logic.

Ueditor logic for interacting with the background:

1. When the editor initializes, the asynchronous Request background processing page, the handler should return a set of JSON format configuration information, the request address carries the parameter is Action=config

2. Click on the Picture Upload button, asynchronous Request background processing page, request address carry parameter for Action=uploadimage

3. Click on the Video Upload button, asynchronous Request background processing page, request address carry parameter for Action=uploadvideo

4. Click the Attachment Upload button, the asynchronous Request background processing page, the request address carries the parameter to Action=uploadfile

5. Click on the map upload in the Online Picture tab, asynchronous Request background processing page, request address carry parameters for Action=listimage

6. Click on the attachment uploaded online File tab, asynchronous Request background processing page, request address carry parameter for Action=listfile

7. Click on the Graffiti button, asynchronous Request background processing page, request address carry parameter for Action=uploadscrawl

What we want to achieve is to call different methods for processing according to the different parameter values of each request, as shown in the following figure, controller calls the corresponding handler for processing according to the parameter value:

The processing logic is simply to read and write the contents of the file in the request requests to the server, and then construct a specific JSON return value.

When uploading files, pictures, and videos, the JSON format is as follows:

{
 "url": "20140703491416521462.png", 
 "state": "SUCCESS", 
 "error": "null", 
 "original": " 20140703491416521462.png ", 
 title": "20140703491416521462.png"
}

Where the URL is the relative address of the file at the server, this address is spelled together with the value of "Xxxurlprefix" in the JSON configuration information.

State is the status information, the successful return information is fixed to success, and the exception condition can be defined by itself.

Error: Exception information, normal, NULL

Original: Internal file name, general and titile the same.

Title: File name.

Online files, online pictures, JSON format is as follows:

{
 ' state ': ' SUCCESS ',
 ' list ': [
  {
   ' url ': ' Upload/image/20140627/6353948647502438222009315.png '
  },
  {
   "url": "Upload/image/20140627/6353948659383617789875352.png"
  },
  {
   "url": "upload/ Image/20140701/6353980733328090063690725.png "
  },
  {
   " url ":" Upload/image/20140701/ 6353980745691597223366891.png "
  },
  {
   " url ":" Upload/image/20140701/6353980747586705613811538.png "
  },
  {
   "url": "Upload/image/20140701/6353980823509548151892908.png"
  }
 ],
 "start": 0 ,
 "size": "Total
 ": 6
}

In which, start, is the logo starting from the first few pictures, personal feeling of little significance.

Size: How many files and pictures are displayed by default.

Total: Number of pictures and files.

List: Lists the relative addresses of the pictures and files as an array.

Here, I realized a simple demo, can realize the file, picture, video upload and online pictures, online file functions. Click here to download code source.

Current support features:

Basic text, typesetting and other functions

Image upload, file upload, video upload function

Online file, online image function

Features not implemented:

Graffiti function

Network picture function

function has been under CentOS, deployed to Nginx, measured, available.

How to use:-----

1. Download the complete code here, Direct CD to the root directory, run

Python manage.py runserver 1989

, you can see the effect demo directly.

2. Configure the directory of Ueditor in urls.py as a static file path, UE in this demo

(R ' ^ue/(?) p<path>.*) $ ', ' Django.views.static.serve ', {' Document_root ': Os.path.dirname (__file__). replace (' \ \ ', '/') + "/ UE "}),

3. Copy the Ueconfig.json file in the demo to the root of your project and modify several key locations:

The "Imageurlprefix": "/upload/images/" modified for their own items in the picture upload after the location of the Save, demo is/upload/images/this directory

Will "Scrawlurlprefix": "/upload/images/", modify the graffiti for your own project

"Snapscreenurlprefix": "/upload/images/", screenshot save location

"Catcherurlprefix": "/upload/images/", Network picture save location

"Videourlprefix": "/upload/vedio/" video File Save Address

"Fileurlprefix": "/upload/files/" attachment Save Address

"Imagemanagerurlprefix": "/upload/onlineimages/", online picture location, online picture is actually the server to provide users with optional pictures

"Filemanagerurlprefix": "/upload/onlinefiles/" online attachment location, online attachment is actually the server to provide users with optional accessories

4. After the JSON file is modified, to set the path above set to a static resource directory, for example, all of the demo is saved to the/upload/subdirectory, then in the urls.py configuration is as follows:

(R ' ^upload/(?) p<path>.*) $ ', ' Django.views.static.serve ', {' Document_root ': (Os.path.dirname (__file__) + "/upload"). Replace ( '\\','/') }),

After that, make sure that the subdirectory is present, for convenience, the program does not automatically create a directory method, need to create manually, such as the demo in the creation of images, vedio, files, Onlinefiles, onlineimages several subdirectories

5. Copy the controller.py file in the demo to any position in the project, in fact, controller is an asynchronous processing of the view, after the copy is completed, in the urls.py configuration of the corresponding routes, the demo in the root directory, so configure the following:

URL (r ' Ueeditorcontroler ', ' UeEditor_django.controller.handler ')

In your own project, you just need to

UeEditor_django.controller.handler

To

Xxxx.controller.handler

Can

6. Configuration work in the final step, the "ueditor.config.js" file

, Serverurl:url + "/net/controller.ashx"

Amended to

, ServerURL: "/ueeditorcontroler"

URL route that was configured in the previous step

Now that the configuration is done, the rest is to refer to Ueditor on the page, and here is a simple HTML page that adjusts the reference path to the script and style based on the Ueditor placement position

 <! DOCTYPE html>