Django — популярный веб-фреймворк для создания надежных и масштабируемых веб-приложений. Хотя он предоставляет множество встроенных функций для форм и ввода текста, могут быть случаи, когда вы хотите создать более продвинутый пользовательский интерфейс для ввода текста. Здесь может пригодиться редактор WYSIWYG (что видишь, то и получишь).

Редактор WYSIWYG позволяет пользователям редактировать и форматировать текст визуально, как в текстовом процессоре, а не писать код HTML или уценку. Это может быть особенно полезно для создания контента, когда пользователи могут не обладать техническими навыками или знаниями HTML.

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

Вот пример кода, который поможет вам начать работу:

Создайте приложение Джанго

python manage.py startapp editor

Установите Джанго CKEditor

pip install django-ckeditor

Добавьте CKEditor в установленные приложения в settings.py.

INSTALLED_APPS = [
    ...
    'ckeditor',
    'ckeditor_uploader',
    ...
]

Добавьте URL-адреса CKEditor в urls.py.

from django.urls import path, include
from ckeditor_uploader import views as ckeditor_views

urlpatterns = [
    ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
    ...
]

Создайте модель с TextField

from django.db import models

class MyModel(models.Model):
    content = models.TextField()

Добавьте виджет CKEditor в поле формы в forms.py.

from django import forms
from ckeditor.widgets import CKEditorWidget
from .models import MyModel

class MyModelForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = MyModel
        fields = ('content',)

Используйте форму в своем views.py и шаблонах.

from django.shortcuts import render
from .forms import MyModelForm

def editor_view(request):
    form = MyModelForm(request.POST or None)
    if request.method == 'POST' and form.is_valid():
        form.save()
    return render(request, 'editor.html', {'form': form})

Создайте шаблон с файлами javascript формы и ckeditor.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Editor</title>
    {{ form.media }}
</head>
<body>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
    </form>
</body>
</html>

Вот и все! Теперь вы можете использовать этот редактор в своем приложении Django.