Best free WYSIWYG editor Python Django admin panel integration

Here you will see a list of free ready-to-use WYSIWYG editors with good open source Django admin integration modules.

1. Quill (BSD 3)
2. TinyMCE (LGPL/GPL)
3. Summernote (MIT)
4. Editor.JS (Apache)
5. CKeditor 5 (LGPL/GPL)
6. Aloha Editor (GPL)

1. Quill — your powerful rich text editor.

An API Driven Rich Text Editor

• Built for developers:
  Granular access to the editor’s content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output.
• Crossplatform:
  Supports all modern browsers. Experience the same consistent behavior and produced HTML across platforms.

| Github | Documentation | Interactive playground | Django integration |

pip install django-quill-editor, then

# settings.py
INSTALLED_APPS = (
    'django_quill',
)
# admin.py
from django.contrib import admin
from .models import QuillPost
@admin.register(QuillPost)
class QuillPostAdmin(admin.ModelAdmin):
    pass

2. TinyMCE — The most advanced WYSIWYG HTML editor designed to simplify website content creation

Built to scale.
Developed in open source.
Designed to innovate.

• Designed for developers:
  TinyMCE 5 has been built with developers in mind, making it easier, simpler, and faster than ever to get an editing experience that fits your use case.
• Supporting content creators:
  Get more done in less time thanks to our productivity solutions.

| Github | Documentation | Interactive playground | Django integration | Django 3.0 installation guide

pip install django-tinymce, then

# settings.py
INSTALLED_APPS = (
    'tinymce',
)
# urls.py
from django.urls import include
urlpatterns = [
    path('tinymce/', include('tinymce.urls')),
]
# USAGE models.py
from django.db import models
from tinymce.models import HTMLField
class MyModel(models.Model):
    content = HTMLField()

3. Summernote — super simple WYSIWYG editor on Bootstrap

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

• Easy to Install:
  Simply download and attach your js, css with bootstrap.
• Integration:
  Integrate it with any back-end.
• Customization:
  Customize by Initializing various options and modules.

| Github | Documentation | Interactive playground | Django integration | Django 3.0 installation guide | Video installation guide

pip install django-summernote, then

# settings.py
INSTALLED_APPS = (
    'django_summernote',
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
X_FRAME_OPTIONS = 'SAMEORIGIN'
# urls.py
from django.urls import include
urlpatterns = [
    path('summernote/', include('django_summernote.urls')),
]
# settings.py if DEBUG=True
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
# USAGE admin.py
from django_summernote.admin import SummernoteModelAdmin
from .models import Post

class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)

admin.site.register(Post, PostAdmin)

4. EditorJS — next generation block styled editor

Free. Use for pleasure.

• It is a block-styled editor:
  Editor.js workspace consists of separate Blocks. Each of them is an independent contenteditable element provided by Plugin and united by Editor’s Core.
• Clean data output in JSON:
  It’s useful to sanitize, validate and process on the backend.

| Github | Documentation | Interactive playground | Plugins | Django integration | Django 3.0 installation guide | Video installation guide

pip install django-editorjs, then

# settings.py
INSTALLED_APPS = (
    'django-editorjs',
)
# USAGE models.py
from django.db import models
from django_editorjs import EditorJsField
class Post(models.Model):
    title = models.CharField(max_length=255)
    body = EditorJsField()
    def __str__(self):
        return self.title

5. CKEditor 5 — Smart WYSIWYG editor components with collaborative editing

Rich text editor of tomorrow, available today.

• One WYSIWYG framework, multiple purposes:
  CKEditor 5 provides every type of WYSIWYG editing solution imaginable.
• Modern and state-of-the-art:
  MVC architecture, custom data model and virtual DOM. It is written from scratch in ES6.

| Github | Documentation | Interactive playground | Django integration | Django 3.0 installation guide | Video installation guide

pip install django-ckeditor, then

# settings.py
INSTALLED_APPS = (
    'ckeditor',
)
# run
./manage.py collectstatic
# rewrite the admin/base_site.html template if needed
{% extends "admin/base_site.html" %}
{% block extrahead %}
<script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>
{{ block.super }}
{% endblock %}
# USAGE admin.py
from django import forms
from django.contrib import admin
from ckeditor.widgets import CKEditorWidget
from post.models import Post
class PostAdminForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())
    class Meta:
        model = Post
class PostAdmin(admin.ModelAdmin):
    form = PostAdminForm
admin.site.register(Post, PostAdmin)

6. Aloha Editor — new kind of content design

Aloha Editor is a JavaScript content editing library

• “What you see is what you get”:
  The HTML5 editor makes it possible to edit websites directly on the portal.
• Fast, uncomplicated editing:
  Videos, photos, graphics, animation and text is daily business with Aloha Editor.

| Github | Documentation | Plugins | Django official integration |

pip install django-aloha-edit, then

# USAGE for HTMLField:
from aloha.fields import HTMLField
class MyModel(models.Model):
    content = HTMLField()
# USAGE for widget:
from aloha.widgets import AlohaWidget
class MyForm(forms.Form):
    content = forms.CharField(widget=AlohaWidget)
# Include the form media in your template somewhere in the head:
<head> {{ form.media }} </head>