Django integrated Baidu Rich Text Editor ueditor

Ueditor is a rich text Web Editor developed by Baidu Web Front-end R & D department. It is lightweight, customizable, and focuses on user experience. It is open-source based on the MIT protocol and allows you to freely use and modify code.

First, download the latest package from the official ueeditor website. asp and ,. for the net, PHP, and JSP versions, the Django version is developed by only one third party, but it seems that the configuration is a little more complicated.

The usage of ueditor is not introduced here, And the ueditor configuration method is not explained here. The official website provides detailed documentation and API introduction. The demo downloaded also contains sample code of common methods, here we will mainly introduce the areas to be modified for ueditor and Django integration.

Any version can be downloaded here, because we only need to extract the front-end part of ueeditor. As for the backend server, we can develop and implement it ourselves.

In fact, most of ueditord functions are available in Django, and it is not useful only for uploading files, images, videos, online images, and online files, because these functions can only be supported by backend processors, we need to use python to implement the processing logic.

Logic of interaction between ueditor and the background:

1. When the editor is initialized, on the asynchronous request background processing page, the handler should return a set of configuration information in JSON format. The request address carries the parameter action = config

2. Click the image upload button and send an asynchronous request to the background processing page. The request address carries the parameter action = uploadimage.

3. Click the video upload button. On the asynchronous request background processing page, the request address carries the parameter action = uploadvideo.

4. Click the attachment upload button. On the asynchronous request background processing page, the request address carries the parameter action = uploadfile.

5. Click the online image tab in multiimage upload. the asynchronous request processing page is displayed. The request address carries the parameter action = listimage.

6. Click the online file tab for attachment upload. the asynchronous request processing page is displayed. The request address carries the parameter action = listfile.

7. Click the graffiti button to go To the asynchronous request background processing page. The request address carries the parameter action = uploadscrawl.

What we need to implement is to call different methods for processing based on different parameter values of each request. As shown in, the Controller calls the corresponding processing program based on the parameter values for processing:

The processing logic is actually very simple. It is to read and write the file content in the request to the server, and then construct a specific JSON return value.

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

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

The URL is the relative address of the file on the server. The URL is displayed together with the "xxxurlprefix" value in the JSON configuration information.

State is the State information, and the returned information is fixed to success. You can customize the exception information.

Error: exception information. If it is normal, it is null.

Original: internal file name, which is generally the same as titile.

Title: file name.

For online files and images, the 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": 20,    "total": 6}

Among them, start is the marker starting from the first few pictures, which makes little sense to the individual.

Size: the number of files and images displayed by default.

Total: Total number of images and files.

List: lists the relative addresses of images and files in arrays.

 

Here, I implemented a simple demo to upload files, images, videos, online images, and online files. Click here to download the source code.

Currently supported functions: 

Basic text and typographical Functions

Image Upload, file upload, and video upload

Online files and Images

Features not implemented:

Graffiti

Network image Function

The function has been deployed under centos and nginx. It is tested and available.

Usage :-----

1. Download the complete code here and run the CD command directly to the root directory.

python manage.py runserver 1989

, You can directly view the effect demonstration.

2. In URLs. py, set the directory where ueditor is located to a static file path, which is 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 directory of your project, and modify several key locations:

Change "imageurlprefix": "/upload/images/" to the location where the image in your project is uploaded and saved. In the demo, set "scrawlurlprefix" to/upload/images ": "/upload/images/", change it to graffiti in your project "snapscreenurlprefix": "/upload/images/", save the location "catcherurlprefix": "/upload/images /", network image storage location "videourlprefix": "/upload/vedio/" video file storage address "fileurlprefix": "/upload/files/" attachment storage address "imagemanagerurlprefix ": "/upload/onlineimages/", where the online image is located. The online image is actually the optional image "filemanagerurlprefix": "/upload/onlinefiles/" provided by the server, online attachments are optional attachments provided by the server.

4. after the JSON file is modified, set the above path to a static resource directory. For example, if all the directories in the demo are saved to the/upload/subdirectory. the configuration in Py is as follows:

( r‘^upload/(?P<path>.*)$‘, ‘django.views.static.serve‘,{ ‘document_root‘: (os.path.dirname(__file__)+"/upload").replace(‘\\‘,‘/‘) }),

Then, make sure that the sub-directories exist. For convenience, there is no automatic Directory Creation Method in the program, and you need to create them manually. For example, you have created several sub-directories in the demo: images, vedio, files, onlinefiles, and onlineimages.

5. set Controller. when the py file is copied to any location in the project, the controller is an asynchronous view. configure the corresponding route in Py, and put it in the root directory in demo, so the configuration is as follows:

url(r‘ueEditorControler‘,‘ueEditor_django.controller.handler‘)

In your project, you only need

ueEditor_django.controller.handler

Change

xxxx.controller.handler

You can.

6. In the last step of configuration, set the file "ueditor. config. js"

, serverUrl: URL + "/net/controller.ashx" 

Change

 , serverUrl: "/ueEditorControler"

That is, the URL route configured in the previous step

At this point, the configuration is complete, and the rest is to reference ueditor on the page. Below is a simple HTML page, you can adjust the Reference Path of the script and style according to the location of the ueditor.

<! Doctype HTML> <HTML lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> 
To view the source code, please go here