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.