Bootstrap

Внедряем richtext WYSIWYG-редактор для проекта с помощью пакета django-ckeditor

Внедряем richtext WYSIWYG-редактор для проекта с помощью пакета django-ckeditor

richtext WYSIWYG-редактор для проекта на django

для того чтобы в django, поле модели в админке, можно было заполнять готовым HTML документом используем django-ckeditor

если проект новый, то понятное дело, создаём окружение, активируем его, и устанавливаем в него нужные пакеты

python -m venv venv

source  venv/bin/activate

установка пакетов


pip install Pillow

pip install django-ckeditor

далее в файл настроек

в settings.py добавляем:

Terminal:

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

CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'height': 300,
'width': '100%',
},
}

CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

в файл urls.py добавялем

Terminal:

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

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

ну и в models.py в нужную модель сначала импортируя пакет, добавляем

Terminal:

from ckeditor_uploader.fields import RichTextUploadingField


class Article(AbstractArticle):
  fulltext = RichTextUploadingField(verbose_name='Полный текст статьи',help_text='Тут нужно ввести всю статью в формате HTML')
  ...

после чего создаём и применяем миграции

python manage.py makemigrations
python manage.py migrate
python manage.py  collectstatic

По идеи если настройки статики проекта были созданы правильно, то всё должно сразу заработать, но проверим, иногда бывает требуются небольшие поправки. Заходим в админку открываем нужный объект и пробуем загрузить изображение.

загружаем страницу админки, опа, а ничего не происходит,(даже в режиме разработчика браузера, обычно по клавише f12, во вкладке console мы не видим никаких ошибок). и такое бывает. В этом случае, может помочь вот такая нехитрая процедура, как удаление и переустановка с флагом upgrade пакета django-ckeditor, мне это помогало, не раз.

в виртуальном окружении проекта, на сервере в shell выполняем

pip uninstall django-ckeditor
pip install django-ckeditor -U

После этой успешной операции, перезагружаем нужную страницу ctrl+f5, находясь в админке, где мы ждём появление в поле WYSIWYG-редактора и где должны увидеть, если не положительный результат, то хотя-бы ошибки в консоле.

вот так выглядят эти ошибки подключения файлов стилей и скриптов

gparted результат

В режиме разработчика такого типа, это говорит о том, что статика, как бы мы не старались, работает не правильно, и нужные файлы не подключились, придётся ковыряться немного вручную с этим. И такое бывает, хоть и делается это довольно просто.

Заходим опять через shell в корень проекта на сервере, и находим, для начала файл стилей с помощью команды:

find ./ -name ckeditor.css -type f

И бинго, видим, что он находится здесь:


./static_root/ckeditor/ckeditor.css

а браузер ищет его и все остальные файлы ckeditor здесь, как мы видим в картинке логов выше:
/static/ckeditor/...

Поэтому, самым простым решением для меня, в этом случае было создать символьную ссылку в каталоге static следующим образом:


cd ./static
ln -s ../static_root/ckeditor ckeditor

и перезапуск сервера(делаем это каджый раз на всякий случай после подобного рода изменений)

sudo /etc/init.d/apache2 restart

Terminal:

(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid$ cd ./static
(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid/static$ ln -s ../static_root/ckeditor ckeditor
(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid/static$ cd ..
(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid$ sudo /etc/init.d/apache2 restart
Restarting apache2 (via systemctl): apache2.service.

Ну и снова жмём в браузере, на той же нужной нам странице ctrl+f5

И если вы всё сделали правильно, то во первых: в консоле в режиме разработчика должна исчезнуть 404-я ошибка, и файлы стилей и скриптов ckeditor должны подгрузиться, и как следствие мы видим WYSIWYG-редактор в ожидаемом нами поле модели, в нашей админке.

WYSIWYG-редактор от ckeditor

gparted результат

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

иконка вставки изображения

gparted результат

изображение, вкладки загрузка с выбранным на компьютере файлом

gparted результат

Если после загрузки, изображение добавилось, поздравляю, значит всё нормально, можно пользоваться. Однако если этого не случилось, в консоле мы увидим причину. Но для этого в настройках settings.py включите режим отладку DEBUG в True и перезгрузите сервер, после снова выполните эту операцию загрузки файла, чтобы уидеть эту причину ошибки.

Она может быть например такой:

изображение ошибки загрузки файла изображения, консоль браузера

gparted результат

1)идём в режим разработчика, в консоль браузера,
2)стрелкой раскрываем сообщение об ошибке с upload
3)переходим во вкладку Responce
и видим, что у нас возникла ошибка загрузки, просто из-за нехватки прав, на этот каталог.

поэтому устанавливаем соответствующие права на запись, для пользователя www-data или для группы, как у вас там настроен сервер.

в данном случае моя команда была такой

Terminal:

(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid$ ls -la static/media
drwxr-xr-x  5 user   www-data  4096 Jun 25 20:16 .
...
(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid$ chmod g+w -R static/media
(venv) itdid@11453259-ctуasdf6:/var/www/html/itdid$ sudo /etc/init.d/apache2 restart
Restarting apache2 (via systemctl): apache2.service.

и после этого ошибка пропала, автоматически в этот каталог добавился подкаталог upload и изображения стали в него загружаться без ошибок.

Также, при этом должны прекрасно загружаться изображения в это поле, напрямую из буфера, без нажатия каких-либо иконок, кнопок.

Копирование материалов разрешается только с указанием автора Roman Sakhno и индексируемой прямой ссылкой на сайт (http://itdid.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/sahroman.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/sahroman.

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как настроить свой компьютер

  2. Текстовая ссылка:

    Она выглядит вот так: Как настроить свой компьютер

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

крипто-донат, на развитие сайта itdid.ru:

В новом окне с терминалом itdid.ru, введите любую сумму: