Django CKEditor  — редактор WYSIWYG

Здравствуйте, в прошлый раз здесь мы писали о другом редакторе WYSIWYG под названием Django-summernote, но сегодня мы кратко рассмотрим Django CKEditor.

Но прежде всего давайте поговорим о них обоих и сравним их друг с другом:

Django CKEditor:

Это приложение Django, которое является оболочкой для текстового редактора JavaScript CKEditor. Он предоставляет простой в использовании интерфейс для написания форматированного текстового контента и очень популярен благодаря своему обширному набору функций, который включает форматирование текста, загрузку изображений, проверку орфографии и многое другое. Он также предоставляет поле формы Django и виджет, который можно использовать в администраторе Django или с другими системами форм.

Django-summernote:

Это приложение Django, которое является оболочкой для текстового редактора Summernote JavaScript. Summernote — более простой редактор форматированного текста по сравнению с CKEditor. Он легче и имеет более современный пользовательский интерфейс. Он также предоставляет такие возможности, как форматирование текста, загрузка изображений и т. д., но его набор функций не так обширен, как у CKEditor.

Выбор между этими двумя вариантами во многом зависит от ваших конкретных требований. Если вам нужны более продвинутые функции и вы не возражаете против сложности, вы можете предпочесть Django CKEditor. Если вы предпочитаете более легкий и простой интерфейс, вы можете предпочесть django-summernote. Вы также должны учитывать документацию, поддержку сообщества и совместимость с вашей версией Django и другими плагинами при выборе между этими двумя.

Давайте установим его!

Процесс установки Django CKEditor очень прост — прежде всего установите библиотеку:

pip install django-ckeditor

модели.py

from django.db import models
from django.utils.text import slugify
from django.urls import reverse
from ckeditor.fields import RichTextField  # Import from ckeditor

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextField(null=True)  # Use RichTextField from ckeditor
    pub_date = models.DateTimeField('date published')
    image = models.ImageField(upload_to='images/', null=True, blank=True)

    def __str__(self):
        return self.title

class Editorial(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    thumbnail = models.ImageField(upload_to='images/', null=True, blank=True)
    content = RichTextField(null=True)  # Use RichTextField from ckeditor

    def save(self, *args, **kwargs):
        if not self.slug:
            potential_slug = slugify(self.title)
            if Editorial.objects.filter(slug=potential_slug).exists():
                i = 1
                while Editorial.objects.filter(slug=potential_slug + '-' + str(i)).exists():
                    i += 1
                self.slug = potential_slug + '-' + str(i)
            else:
                self.slug = potential_slug
        super().save(*args, **kwargs)

    def get_absolute_url(self):
        return reverse('editorial', args=[str(self.slug)])

    def __str__(self):
        return self.title

Как вы можете видеть выше, я должен импортировать:

from ckeditor.fields import RichTextField  # Import from ckeditor

и измените «контент» в «Статьях» и «Редакциях»:

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextField(null=True)  # <-- here
    pub_date = models.DateTimeField('date published')
    image = models.ImageField(upload_to='images/', null=True, blank=True)

    def __str__(self):
        return self.title

class Editorial(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    thumbnail = models.ImageField(upload_to='images/', null=True, blank=True)
    content = RichTextField(null=True)  # <-- here
    title = models.CharField(max_length=200)
    content = RichTextField(null=True)  # Use RichTextField from ckeditor
    pub_date = models.DateTimeField('date published')
    image = models.ImageField(upload_to='images/', null=True, blank=True)

    def __str__(self):
        return self.title

class Editorial(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    thumbnail = models.ImageField(upload_to='images/', null=True, blank=True)
    content = RichTextField(null=True)  # Use RichTextField from ckeditor
content = RichTextField(null=True)  # <-- here

Теперь, когда мы изменили «models.py», давайте изменим «urls.py»:

URL.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('editorial/<slug:slug>/', views.editorial, name='editorial'),
    path('ckeditor/', include('ckeditor_uploader.urls')),  # Use ckeditor URLs
]

как видите мы добавляем:

path('ckeditor/', include('ckeditor_uploader.urls')),  # Use ckeditor URLs

Это круто! теперь давайте реализуем нашу библиотеку в settings.py:

Точно так же, как это выше! но это не конец изменений settings.py:

CKEDITOR_UPLOAD_PATH = "uploads/"

Хорошо, последнее — отредактировать «admin.py»:

from django.contrib import admin
from django.db import models  # Import models from django
from .models import Editorial
from ckeditor.widgets import CKEditorWidget  # Import from ckeditor

class EditorialAdmin(admin.ModelAdmin):  # Use the regular ModelAdmin
    formfield_overrides = {
        models.TextField: {'widget': CKEditorWidget},
    }

admin.site.register(Editorial, EditorialAdmin)

давайте все проверим!

Хорошо, не давайте проверим результаты!

Как видите, проблема есть. Практически совсем не читает нам пробелы между текстом и т.д. Это нужно исправить. Как это сделать?

это просто!

Измените эту строку в editorials.html:

от:

к этому:

мы добавили ‘|safe’

результаты:

Это все братцы!

# немного саморекламы

Привет! Меня зовут Дориан, и я управляю небольшой компанией по разработке программного обеспечения. Мое предложение для вас.

— Интернет-магазины и сайты
— Веб и мобильные приложения
— Компьютерная графика
— Автоматизация процессов
— Боты, API и инфраструктура
— Брендинг
> — Внедрение искусственного интеллекта (ИИ)
— Плагины WordPress и PrestaShop и др.
— Смарт-контракты / Запуск собственной криптовалюты / NFT.
— Внедрение технологии WEB3 / Блокчейн в бизнесе.

Вы хотите создать свой собственный криптопроект на основе какого-либо приложения или просто хотите создать свою криптовалюту или NFT?
Хотите внедрить технологии WEB3 и блокчейн в свой бизнес?

— Веб-сайт: www.travilabs.com
Свяжитесь с нами:
Facebook: https://www.facebook.com/profile. php?id=100091601081883
Электронная почта: [email protected]