Django Portfolio Journal

Integrate TinyMCE as rich text editor instead of CKEditor


I got a warning on my terminal about using CKEditor:

WARNINGS:
?: (ckeditor.W001) django-ckeditor bundles CKEditor 4.22.1 which isn't supported anmyore and which does have unfixed security issues, see for example https://ckeditor.com/cke4/release/CKEditor-4.24.0-LTS . You should consider strongly switching to a different editor (maybe CKEditor 5 respectively django-ckeditor-5 after checking whether the CKEditor 5 license terms work for you) or switch to the non-free CKEditor 4 LTS package. See https://ckeditor.com/ckeditor-4-support/ for more on this. (Note! This notice has been added by the django-ckeditor developers and we are not affiliated with CKSource and were not involved in the licensing change, so please refrain from complaining to us. Thanks.)

So, I checked the Django Packages and found this package to use as a rich text editor: TinyMCE integration for Django.

What steps do I need to take to integrate the TinyMCE editor into my project?

A) Install the package:

pip installed django-tinymce==4.1.0

B) Replace the ckeditor and ckeditor-update in settings.py in the INSTALLED_APPS and add additional features to the default configuration of the TinyMCE:

# portfolio/settings.py

INSTALLED_APPS = [

    # installed packages
    "tinymce",
]

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,
}
TINYMCE_SPELLCHECKER = True

Legend:

    • TINYMCE_DEFAULT_CONFIG: This is the default configuration variable for the editor. In our example the editor has been extended by additional options of the default configuration.

C) replace the URL in your project urls.py file:

# portfolio/urls.py

urlpatterns = [
    path("tinymce/", include("tinymce.urls")),
]

D) replace the introduction and content attribute:

# projects/models.py

from django.db import models
from tinymce.models import HTMLField

class Project(models.Model):
    keywords = HTMLField()
    introduction = HTMLField()
    experience = HTMLField()
    future = HTMLField(null=True, blank=True)

Legend:

    • HTMLField(): Adding this field to the model is the easiest way to use the TinyMCE editor. The behaviour of the HTMLField() is the same as the standard Django TextField().

E) and don't foget to make migrations

python manage.py makemigrations
python manage.py migrate

Update the template:

<!-- projects/templates/portfolio_details.html -->

      <div class="row">
        <div class="section-title">
          <h2>{% trans "Introduction" %}</h2>
        </div>
        <p>{{ project.introduction|safe }}</p>
        <hr>
        <div class="section-title">
          <h2>{% trans "Competences" %}</h2>
        </div>
        <p>{{ project.keywords|safe }}</p>
        <hr>
        <div class="section-title">
          <h2>{% trans "Learning Experience" %}</h2>
        </div>
        <p>{{ project.experience|safe }}</p>
        {% if project.future %}
          <hr>
          <div class="section-title">
            <h2>{% trans "Implementations in the future" %}</h2>
          </div>
          <p>{{ project.future|safe }}</p>
        {% endif %}
      </div>

Legend:

    • |safe: Identifies a string as not requiring further HTML escaping before outputting. If autoescaping is off, this filter has no effect. This template filter is not recommended if the context is being uploaded by a real user who is not a member of staff.

Possible improvements:

    • use the TinyMCE widget in forms instaed of the HTMLField() in models.
    • replace the template filter |safe


Designed by BootstrapMade and modified by DoriDoro