Django framework logo

How to install django-tinymce WYSIWYG editor

by: AWS November 06,2022 last update: 1 month, 3 weeks Django WYSIWYG Tinymce

Hello everyone !

So django tinymce is a small but useful rich text editor, which allow you to write a rich blog post like the one you are reading now.

so let's go step by step, on how to install it and use it.

Installation

First you need to install the package django-tinymce using the following commande

pip install django-tinymce

If you are using an old django version you can specify the django-tinymce package that suite the Django version you are using

this way.

pip install django-tinymce==version number

If you have an old Django version like 2.1.1 and you install the latest django-tinymce package, pip will upgrade your django version to meet the package version you are installing in this situation you need to mention the package version to prevent upgrading your django version.

you can find the release history from here

Configuration

  1. Don't forget to include the app in django settings.py file.
    INSTALLED_APPS = [
          ...
         'tinymce',
         ...
    ]
  2. Include the following configuration in the botton of the settings.py file.
    TINYMCE_DEFAULT_CONFIG = {
         "height": "320px",
         "width": "960px",
         "menubar": "file edit view insert format tools table help",
         "plugins": "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code "
         "fullscreen insertdatetime media table paste code help wordcount spellchecker",
         "toolbar": "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft "
         "aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor "
         "backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | "
         "fullscreen preview save print | insertfile image media pageembed template link anchor codesample | "
         "a11ycheck ltr rtl | showcomments addcomment code",
         "custom_undo_redo_levels": 10,
         "language": "en_EN", # To force a specific language instead of the Django current language.
    }
  3. In the model that contains the field you want to change to a rich text editor, add the following import and update the field that holds the post content to HTMLField
    from tinymce.models import HTMLField
              
              class Post(models.Model, HitCountMixin):
                      title = models.CharField(max_length=100)
                      slug = models.SlugField()
                      content = HTMLField()
 
The changes will be applied to the Admin form also