Установка визуального редактора Ckeditor для Django

Ckeditor один из лучших визуальных редакторов. Практически на каждый сайт на котором приходится, добавлять или изменять контент необходим визуальный редактор. Вот и я решил для одного из своих  проектов дать возможность пользователям удобно редактировать статьи.  ниже приведу пример настройки самого редактора Ckeditor и плагина к нему для загрузки изображений через веб-интерфейс ckeditor-uploaders.

Первым делом установим  сам пакет в виртуальное окружение:


pip install django-ckeditor

Далее в INSTALLED_APPS добавим наши приложения:

'ckeditor',
'ckeditor_uploader',

Отмечу что второй пакет ставится автоматически и отдельно его устанавливать не надо.

Далее нужно настроить основные конфиги в settings.py

# Зависимость визуального редактора
CKEDITOR_JQUERY_URL = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_IMAGE_BACKEND = 'pillow'

CKEDITOR_CONFIGS = {
 'default': {
 'toolbar': 'Full',
 'height': 500,
 'width': 900,
 'extraPlugins':'codesnippet',
 },
}

CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False
CKEDITOR_RESTRICT_BY_USER = True
CKEDITOR_BROWSE_SHOW_DIRS = True

В файле urls нашего приложения прописываем url ckeditor

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

 Также не забываем  про отдачу статики в dev-окружении и дописываем в этот же файл urls.py:

from django.conf.urls.static import static
from django.conf import settings

if settings.DEBUG:
 urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Теперь когда все готово добавим наше поле в модель,

from ckeditor_uploader.fields import RichTextUploadingField
class MyModel(models.Model):
    body = RichTextUploadingField(config_name='default')

 

Вам также может понравиться

4 комментария

  1. Спасибо, автору. Вы спасли мою психику. я все мозги себе вывихнул, только потому что отдачу статики на дев-сервере настраивал не так как у вас. С вашими натсройками всё сразу заработало!

Добавить комментарий

Ваш e-mail не будет опубликован.

Яндекс.Метрика