WYSIWYG – это аббревиатура, которая используется для обозначения компьютерных систем редактирования, которые позволяют пользователям максимально легко создавать и редактировать документы, презентации и другие виды цифровых произведений.
Редактор WYSIWYG выполняет это, предоставляя пользователям интерфейс, который позволяет им визуально видеть, как будет выглядеть их конечный результат при его создании или внесении в него изменений. Существует множество WYSIWYG-редакторов, таких как TinyMCE, Froala, CKEditor и т. д.
Предположим, вы создаете приложение для блога, вам нужно много форматировать свой контент, например добавлять различные заголовки, ссылки, изображения и многое другое, в этом случае редактор WYSIWYG может избавить вас от многих проблем. Кроме того, даже если вы не создаете приложение для блога, любому приложению нужны страницы о нас, положениях и условиях, писать их на WYSIWYG сравнительно быстрее.
CKEditor — это HTML-редактор, который встраивается в веб-страницы. Он работает как привычные текстовые редакторы и сразу показывает, как будет выглядеть документ. Отличие в том, что документ сразу создается с использованием языка разметки HTML.
Редактор используется для быстрого создания и редактирования веб-страниц. Его можно использовать внутри Django, чтобы создавать и редактировать контент на страницах сайта. Редактор поддерживает множество языков, включая русский.
Установим редактор в виртуальную среду:
pip install django-ckeditor
Зарегистрируем приложение и внесём необходимые настройки в файл settings.py:
INSTALLED_APPS = [
.....
.....
'ckeditor_uploader',
'ckeditor'
]
STATIC_ROOT = BASE_DIR / 'static/'
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_CONFIGS = {
'awesome_ckeditor': {
'toolbar': 'full',
'height': 300,
},
}
Запустите команду управления статикой. Это скопирует статические файлы в каталог, заданный настройкой STATIC_ROOT:
python manage.py collectstatic
Далее нам нужно добавить маршруты CKEditor, для этого в главном файле urls.py добавьте следующую строку:
path('ckeditor/', include('ckeditor_uploader.urls')),
Работа с моделями и формами
Теперь переходим к модели Post, нам необходимо изменить тип TextField у полей description, text на RichTextField:
from ckeditor.fields import RichTextField
class Post(models.Model):
# поля модели
description = RichTextField(config_name='awesome_ckeditor', verbose_name='Краткое описание', max_length=500)
text = RichTextField(config_name='awesome_ckeditor', verbose_name='Полный текст записи')Выполним миграции и запустим сервер.
Первым делом перейдем в админ панель и попробуем добавить новую запись:
Мы видим что редактор успешно добавился и работает. Но на данном этапе он не будет работать в наших формах сайта. Чтобы добавить редактор в форму добавления записи с сайта нам необходимо добавить {{ form.media }} перед нашей формой в файле шаблона post_create.html.
{% extends 'main.html' %}
{% block content %}
<div class="card mb-3 border-0 nth-shadow">
<div class="card-body">
<div class="card-title nth-card-title">
<h4>Добавление статьи</h4>
</div>
<form method="post" action="{% url 'post_create' %}" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
<div class="d-grid gap-2 d-md-block mt-2">
<button type="submit" class="btn btn-dark">Добавить статью</button>
</div>
</form>
</div>
</div>
{% endblock %}
Теперь если мы попробуем добавить запись, мы видим что редактор появился и на этой странице:
Если мы хотим добавить этот редактор в виде виджета(не меняя поля), то мы можем это сделать как в коде ниже, добавим его в файл forms.py:
from ckeditor.widgets import CKEditorWidget
class PostCreateForm(forms.ModelForm):
"""
Форма добавления статей на сайте
"""
title = forms.CharField(widget=CKEditorWidget(config_name='awesome_ckeditor'))
class Meta:
model = Post
fields = ('title', 'slug', 'category', 'description', 'text', 'thumbnail', 'status')
Корректировка шаблонов полной и краткой статьи
Для правильного отображения контента применяемого от редактора, необходимо в файле post_list.html, а также в post_detail.html к полям {{ post.description }} и {{ post.text }} добавить тег safe:
{% extends 'main.html' %}
{% block content %}
{% for post in posts %}
<div class="card mb-3">
<div class="row">
<div class="col-4">
<img src="{{ post.thumbnail.url }}" class="card-img-top" alt="{{ post.title }}">
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title">
<a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
</h5>
<p class="card-text">{{ post.description|safe }}</p>
<small>Добавил {{ post.author.username }}, {{ post.create }},</small>
в категорию: <a href="{{ post.category.get_absolute_url }}">{{ post.category.title }}</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
Также внесём изменения в шаблон post_detail.html:
{% extends 'main.html' %}
{% load mptt_tags %}
{% load static %}
{% block content %}
<div class="card mb-3">
<div class="row">
<div class="col-4">
<img src="{{ post.thumbnail.url }}" class="card-img-top" alt="{{ post.title }}" />
</div>
<div class="col-8">
<div class="card-body">
<h5>{{ post.title }}</h5>
<p class="card-text">{{ post.description|safe }}</p>
<p class="card-text">{{ post.text|safe }}</p>
Категория: <a href="{% url 'post_by_category' post.category.slug %}">{{ post.category.title }}</a> / Добавил: {{ post.author.username }} / <small>{{ post.time_create }}</small>
</div>
</div>
</div>
{% if post.tags.all %}
<div class="card-footer border-0">
Теги записи: {% for tag in post.tags.all %} <a href="{% url 'post_by_tags' tag.slug %}">{{ tag }}</a>, {% endfor %}
</div>
{% endif %}
</div>
<div class="card border-0">
<div class="card-body">
<h5 class="card-title">
Комментарии
</h5>
{% include 'blog/comments/comments_list.html' %}
</div>
</div>
{% endblock %}
На этом добавление редактора CKEditor закончено. Более подробнее о настройках этого редактора вы можете посмотреть в его документации.
