1. DjangoUeditor What is it? ？

Ueditor HTML Editor is Baidu open source online HTML Editor , Very powerful , For example, the table can be directly dragged to adjust the cell size , DjangoUeditor Is to integrate this editor into an editor that can be used in django Directly used in the project app, Give Way django Projects can easily use this editor .

2. How to get DjangoUeditor

From the official Github download , Then put it into your own project , official Github Address ：https://github.com/zhangfisher/DjangoUeditor, But because the official has not been updated for a long time , Currently only supported Python2.7, If you want to use Python3.6, You need to modify it to compile successfully , The good news is that you don't have to modify it yourself , The teacher of moke.com has revised it , compatible Python2.7 and 3.6, You can use it directly , This is the magic of open source , Good things should be collected , I am also fork To their own github, Address ：https://github.com/KenZP/DjangoUeditor3_imooc, Valid indefinitely , You can download and use .

3. How to install DjangoUeditor

a. In my own project , and apps Create a at the same level extra_apps, This file holds all third parties app, Download it okay DjangoUeditor, Put it in extra_apps Inside .

b. Configuration items setting.py file

hold extra_apps Add to the root directory , Add the following code ：

sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))

stay INSTALLED_APPS Add the following ：

'DjangoUeditor'

c. url.py To configure

In the project url.py Of documents urlpatterns Add the following url：

url(r'^ueditor/', include('DjangoUeditor.urls')),

thus ,DjangoUeditor Installation completed , We can use it .

4. How to use DjangoUedit

After installed , All we need to do is model You can modify the fields that need to use this plug-in , Such as the content field of the article , The default is as follows ：

body = models.TextField(default="", verbose_name=" Article content ")

If you want to use Ueditor, Just modify the following ：

body = UEditorField(default="", verbose_name=" Article content ")

Because of the use of UEditorField, So we need to import This module

from DjangoUeditor.models import UEditorField

You can find , Completely and django model Fields are seamlessly connected , It also extends many properties , Just add the attributes you need .

After this configuration, do the following for the database makemigrations and migrate, After entering the background, you will find that the article content input box is already Ueditor Interface , There are many rich functions , Pictured ：

5. DjangoUeditor What are the extended attributes ？

• width,height : Editor width and height , In pixels .
• toolbars : Configure the toolbar you want to display , The value is mini,normal,full, For little , commonly , All . If the number of buttons in the default toolbar does not meet your requirements , You can go to settings It is equipped with its own display button . See the following introduction .
• imagePath : The path to save the image after uploading , Such as "images/", Upload to "{{MEDIA_ROOT}}/images" Folder . Be careful ： If imagePath Value sets only the folder , Then there must be "/" imagePath Can press python String formatting ： Such as "images/%(basename)s_%(datetime)s.%(extname)s", So if you upload test.png, Then the file will Saved as "{{MEDIA_ROOT}}/images/test_20140625122399.png",imagePath Variables that can be used in are ：
  • time : Upload time ,datetime.datetime.now().strftime("%H%M%S")
  • date ： The date of uploading ,datetime.datetime.now().strftime("%Y%m%d")
  • datetime ： Time and date of upload ,datetime.datetime.now().strftime("%Y%m%d%H%M%S")
  • year : year
  • month : month
  • day : Japan
  • rnd : Three digit random number ,random.randrange(100,999)
  • basename ： The name of the uploaded file , Do not include extension
  • extname : Uploaded file extension
  • filename : The full name of the uploaded file
• filePath : The path to save attachments after uploading , Set rules and imagePath equally .
• upload_settings : The dictionary is worth , example :upload_settings={ imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s", imageMaxSize:323232 fileManagerListPath:"files" }
  • upload_settings The content of is ueditor/php/config.json The configuration content inside , therefore , You can go and see config.json Or the content of official documents How to configure upload_settings, Basically, it is used to configure the upload path 、 File extension allowed to upload 、 The maximum uploaded file size .
  • above imagePath and filePath Be extracted separately to configure , The reason is that these two parameters are most commonly used ,imagePath Equivalent to upload_settings Inside imagePathFormat,filePath Equivalent to upload_settings Inside filePathFormat.
  • you upload_settings It has imagePathFormat, It can also be in UeditorField It set up imagePath, The effect is the same . But if both are set , be imagePath Higher priority .
  • Graffiti file 、 Screenshot 、 Remote capture 、 Picture library xxxxPathFormat If not configured , Default equal to imagePath.
  • Remote file library xxxxPathFormat If not configured , Default equal to filePath.
• settings : The dictionary is worth , Configuration items and ueditor/ueditor.config.js The configuration items are consistent .
• command : It can be for Ueditor Add a new button 、 A drop-down box 、 Dialog box