Use Rich Text Editor in Django Project

1 Development highlights

There are many rich text editors on the Internet, including markdown, tinymce, ueditor, kindeditor, ckeditor, and so on. Using these editors in projects involves the following issues:

Edit page

• Rendering editor on the HTML page;

• Customize the editor functions, such as text styles, image uploads, and code inserts;

• Custom editor styles refer to the overall style of the editor, such as height, width, and display position;

• Preview content;

• Get content;

Display page

• Display content;

2 Django app

The following table lists some common apps that can be found on GitHub. The links are shown below.

App	Django-ckeditor	Django-tinymce	Django-markdown-denx	Django-WMD-Editor
Editor	Ckeditor	Tinymce	Markdown	Markdown
Models. Field	Fields. richtextfield	Htmlfield	N	Models. markdownfield
Forms. Field	Fields. richtextformfield	N	N	N
Widget	Widgets. ckeditorwiet	Wiets. tinymec Widgets. admintinymec	N	Widgets. markdowninput Wightets. adminmarkdowninput
Tempatetags	N	Tinymce_tags	Markdown_denx_tags	N
Static/Media	Y	Y	Y	Y
Settings	_ Init __	Settings	Conf. Settings	_ Init __
Remarks	Image Processing	File Processing

(Y indicates that this function is available, and N indicates that this function is not available)

The above table lists the functions provided by each app in each module:

• The last two apps are editors and the other ones are content display.

• Tinymce provides the most functions.

• Forms. field can be implemented by models. Field + widget.

3. Getting Started

Although different editors are used, there are general steps for getting started.

3.1 install the app

Run Pip command to install: Pip install your-app-name

3.2 configuration items

Add an app in install_apps

Run Python manage. py collectstaticfiles or directly copy the static files to the static directory of the project.

3.3 rendering Editor

Model layer: replace models. textfield in the editor with the corresponding* Models. Field *

Form layer: CK can directly use fields. richtextformfield or form. textfield (widget =* Widget *)

Template layer: Load CSS/JS files, directly use scripts or link labels (provided that you know which files are loaded), or use the variable Assignment Method, it is a string of script and link labels after expansion.

3.4 Display content
Use the template filter to display, that is
 
Tinymce
 
{% load tinymce_tags %}{{ content| tinymce_preview }}
 
Markdown
 
{% load markdown_deux_tags %}{{ content|markdown }}
4. Advanced custom 4.1 custom editor Style Function
In the attrs parameter passed in by the widget constructor, attrs is a dictionary that represents the attribute-value of the HTML element. See the Django document.
 
class DemoForm(forms.Form):    content = forms.CharField(widget=widgets.TinyMCE(attrs={‘width‘:‘500px‘, ‘height‘:‘200px‘}))
4.2 other settings
This part varies with apps and is mainly set in the settings module of the project. However, they all have default values. For details, refer to the official documentation.
5 References
This article is based on the following open-source projects
 
Shaunsephton/Django-ckeditor · GitHub
 
Https://github.com/shaunsephton/django-ckeditor
 
Aljosa/Django-tinymce · GitHub
 
Https://github.com/aljosa/django-tinymce
 
Jpartogi/Django-WMD-Editor · GitHub
 
Https://github.com/jpartogi/django-wmd-editor
 
Trentm/Django-markdown-Deux · GitHub
 
Https://github.com/trentm/django-markdown-deux
 


Use Rich Text Editor in Django Project