on branch: dev/ckeditor

This WYSIWYG editor is a rich text editor. It allows the user or an administrator to write content directly on the web page or in the admin panel.

First we have to insatll the package, add it to INSTALLED_APPS in settings.py and set a path to CKEDITOR_UPLOAD_PATH:

pip install django-ckeditor

# settings.py

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    # custom apps
    "accounts",
    "core",
    "doridoro",
    "projects",
    # installed packages
    "ckeditor",
    "ckeditor_uploader",
]

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, "core/staticfiles")
STATIC_URL = "/static/"
STATICFILES_DIRS = [
    BASE_DIR / "core/static",
]

# Media files
MEDIA_URL = "/images/"
MEDIA_ROOT = os.path.join(BASE_DIR, "core/media")


# settings for CKEditor (django-ckeditor)
CKEDITOR_UPLOAD_PATH = "core/static/assets/img/ckeditor/"
CKEDITOR_BASEPATH = "core/static/ckeditor/ckeditor/"
CKEDITOR_FILENAME_GENERATOR = 'utils.get_filename'

Legend:

• • STATIC: With these variables you set the path for your static files. In my case I have all static files in my application called: core.
  • MEDIA: These variables handles when a user or an administrator uploads files from the web page or the admin panel.
  • CKEDITOR_UPLOAD_PATH: This variable sets the absolute path where the files uploaded by the user will be stored.
  • CKEDITOR_BASEPATH: Possible not necessary to set but in case the staticfile storage is not found.
  • CKEDITOR_FILENAME_GENERATOR: If you want to have control over the generation of filenames that will be uploaded by CKEditor, you need to use this variable and create a function to generate the filename.

The function below was copied from the CKEditor documentation for learning purposes.

# utils.py

def get_filename(filename, request):
    return filename.upper()

This command will copy the django-ckeditor static and media resources into the directory given by the STATIC_ROOT.

django-admin collectstatic

# portfolio/urls.py (the project urls.py file)

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("core.urls", namespace="core")),
    path("", include("doridoro.urls", namespace="doridoro")),
    path("", include("projects.urls", namespace="projects")),
    path("ckeditor/", include("ckeditor_uploader.urls")),
]

Legend:

• • path("ckeditor/", include("ckeditor_uploader.urls")),: This url will be set in your project urls.py file to include all CKEditor URLs.

What will be changed in the models.py file of the Projcet model?

# projects/models.py

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=250)
    create_date = models.DateField()
    introduction = models.TextField()
    content = models.TextField()
    published = models.BooleanField(
        default=True, verbose_name=_("project visible on website")
    )
    tags = models.ManyToManyField(
        "Tag", related_name="project_tags"
    )
    links = models.ManyToManyField(
        "Link", related_name="project_links"
    )
    doridoro = models.ForeignKey(
        "doridoro.DoriDoro",
        on_delete=models.SET_NULL,
        null=True,
        related_name="doro_project",
    )

    def __str__(self):
        return self.title

Just the introduction and the content attribute will be changed:

# projects/models.py

from ckeditor.fields import RichTextField

class Project(models.Model):
    introduction = RichTextField()
    content = RichTextField()