Adding An Editor For Your Django Admin

eric | Feb. 25, 2020, 5 p.m.

You can add editing functionality to the Django administration backend by adding an editor to all or to selected forms in the backend. Here is a couple of fast-track how-tos on how to set this up with TinyMCE and CKEditor, respectively.

There are many plugins to choose from. You will find a complete list at Django Packages - WYSIWYG Editors. I have chosen TinyMCE and CKEditor because they have a lot of features and seem to be fairly well maintained.

This is a how-to on the fastest way to get either TinyMCE or CKEditor working on all text fields on the administration backend. Both editors can be tweaked in various ways, but that is something you will have to look up in the documentation referenced below.

TinyMCE

Install TinyMCE, for instance, by using pip: pip install django-tinymce To add TinyMce, we need to add it to admin.py:

from tinymce.widgets import TinyMCE

We also need to alter the PostAdmin-class to show the TinyMce-widget:

formfield_overrides = {
    models.TextField: {'widget': TinyMCE(attrs={'cols': 80, 'rows': 30})}
}

The attributes included in the form field override adjust the size of the widget.

The complete admin.py should look something like this:

from django.contrib import admin
from django.db import models
from tinymce.widgets import TinyMCE 

from .models import Post


class PostAdmin(admin.ModelAdmin):
    list_display = ('title', 'slug', 'status', 'created_on')
    list_filter = ('status',)
    search_fields = ['title', 'lead', 'content']
    prepopulated_fields = {'slug': ('title',)}
    formfield_overrides = {
        models.TextField: {'widget':
            TinyMCE(attrs={'cols': 80, 'rows': 30})}
    }

admin.site.register(Post, PostAdmin)

The TinyMCE-app needs to be added to installed apps in settings.py:

INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
     ...,
]

tinymce-urls must be added to urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('tinymce/', include('tinymce.urls')),
]

CKEditor

The installation of the CKEditor is straight-forward. Just follow the instructions in the django-tinymce plugin reference.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

To get the CKEditor on all text fields on all forms, simply add it in the app's admin.py:

from django.contrib import admin
from django.db import models
from ckeditor.widgets import CKEditorWidget

from .models import Post


class PostAdmin(admin.ModelAdmin):
    list_display = ('title', 'slug', 'status', 'created_on')
    list_filter = ('status',)
    search_fields = ['title', 'lead', 'content']
    prepopulated_fields = {'slug': ('title',)}
    formfield_overrides = {
        models.TextField: {'widget':
            CKEditorWidget()}
    }


admin.site.register(Post, PostAdmin)

Simple, right? If you are running your project in a virtual environment, remember to add the chosen plugin to the requirements file. For instance, using pip:

pip freeze -r requirements.txt

References

Django Packages - WYSIWYG Editors https://github.com/django-ckeditor/django-ckeditor

django-tinymce plugin reference https://django-tinymce.readthedocs.io/en/latest/index.html

CKEditor installation and usage https://github.com/django-ckeditor/django-ckeditor