Django integrates the ueditor Rich Text Editor and solves the problem of uploading and displaying images and videos.

Django integrates the ueditor Rich Text Editor and solves the problem of uploading and displaying images and videos.
Generally, the text editor in the django background is relatively simple, so the ueditor editor is added.
Ueditor is an open-source product developed by Baidu. The django version is not available on the official website.
Django-version https://github.com/zhangfisher/DjangoUeditor/archive/master.zip
Decompress the package and copy the DjangoUeditor folder to the django project directory, which is the same as the app directory.

Start modification:
Url. py file

Import fromDjangoUeditorimporturlsasDjangoUeditor_urls
Add route url (R' ^ ueditor/', include (DjangoUeditor_urls ))

Models File
Import fromDjangoUeditor. models import UEditorField
Definition of child segments that require the editor

Context = UEditorField ('content', height = 300, width = 1000, default = '', blank = True, imagePath =" news ", toolbars = 'full ', filePath = 'files ')

The text box size and field default values are defined. imagePath and filePath define the image, video, and file upload paths (relative to settings. MEDIA_ROOT)
Toolbars defines the display complexity of functions, such as mini, besttome, nomal, and full. It is set in DjangoUeditor. settings.

In this way, you can use

However, images and videos cannot be uploaded. the upload fails because the path is open during image uploading. You can upload the video.
You need to modify the file DjangoUeditor. views. The modification function of the save_upload_file file is about 38 lines.

Directly modify the file to perform different operations based on the upload action.

 
 

  
  
Def save_upload_file (PostFile, FilePath, action ):

  
  


  
  
If action = 'uploadfile ':

  
  
FilePathWrite = FilePath + '/' + str (PostFile)

  
  
Elif action = 'uploadimage ':

  
  
FilePathWrite = FilePath + '/' + str (PostFile)

  
  
# Elif action = 'uploadvideo ':

  
  
# FilePathWrite = videofile (FilePath, '/video /')

  
  
Else:

  
  
FilePathWrite = FilePath

  
  


  
  
Try:

  
  
F = open (FilePathWrite, 'wb ')

  
  
For chunk in PostFile. chunks ():

  
  
F. write (chunk)

  
  
Failed t Exception as E:

  
  
F. close ()

  
  
Return u "file writing error:" + E. message

  
  
F. close ()

  
  
Return u "SUCCESS"
 
 

After the "OK" function is changed, you can upload images in the corresponding folder, but the images cannot be displayed in the dialog box. The corresponding path is incorrect. In this case, you need to modify another function.

Modify the DjangoUeditor. views file, which is about 258 rows. You need to splice the returned image path and modify the return_info dictionary again. Then, you can use the upload operation to redefine the returned url.

 
 

  
  
Import urllib
  
  
If action = 'uploadvideo ':

  
  
Url = urllib. basejoin (USettings. gSettings. MEDIA_URL, OutputPathFormat)

  
  
Else:

  
  
Url = urllib. basejoin (USettings. gSettings. MEDIA_URL, OutputPathFormat) + '/' + upload_file_name

  
  


  
  
Return_info = {

  
  
'Url': url, # Name of the saved file

  
  
'Original': upload_file_name, # original file name

  
  
'Type': upload_original_ext,

  
  
'State': state, # upload status. If the upload is successful, SUCCESS is returned. Other values are returned to the Image Upload box as they are.

  
  
'SIZE': upload_file_size

  
  
}
 
 

Now you can upload images, videos, and files. However, there are still some things, such as graffiti, which cannot be used. We haven't studied them yet.


OK can be used.