Внедряем richtext WYSIWYG-редактор для проекта с помощью пакета django-ckeditor
richtext WYSIWYG-редактор для проекта на django
для того чтобы в django, поле модели в админке, можно было заполнять готовым HTML документом используем django-ckeditor
если проект новый, то понятное дело, создаём окружение, активируем его, и устанавливаем в него нужные пакеты
python -m venv venv
source venv/bin/activate
установка пакетов
далее в файл настроек
в 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-редактора и где должны увидеть, если не положительный результат, то хотя-бы ошибки в консоле.
вот так выглядят эти ошибки подключения файлов стилей и скриптов
В режиме разработчика такого типа, это говорит о том, что статика, как бы мы не старались, работает не правильно, и нужные файлы не подключились, придётся ковыряться немного вручную с этим. И такое бывает, хоть и делается это довольно просто.
Заходим опять через 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
В принципе, мы добились желаемого, и можем писать нужные нам статьи, если в качестве добавления изображений мы будем использовать ссылки, на них, но это ещё не всё. Ведь нам нужен полностью рабочий функционал, поэтому, находясь, всё в том же режиме разработчика браузера, пробуем загрузить своё изображение на наш сервер, через иконку нашего richtext
иконка вставки изображения
изображение, вкладки загрузка с выбранным на компьютере файлом
Если после загрузки, изображение добавилось, поздравляю, значит всё нормально, можно пользоваться. Однако если этого не случилось, в консоле мы увидим причину. Но для этого в настройках settings.py включите режим отладку DEBUG в True и перезгрузите сервер, после снова выполните эту операцию загрузки файла, чтобы уидеть эту причину ошибки.
Она может быть например такой:
изображение ошибки загрузки файла изображения, консоль браузера
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
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.