Как настроить Django + TinyMCE + Filebrowser?

Для настройки TinyMCE + Filebrowser начнем установку с TinyMCE (у меня windows).

Установка TinyMCE:

pip install django-tinymce

Добавьте tinymce в INSTALLED_APPS в settings.py вашего проекта:

INSTALLED_APPS = (
    ...
    'tinymce',
    ...
)

Добавьте tinymce.urls в urls.py своего проекта:

urlpatterns = patterns('',
    ...
    path('tinymce/', include('tinymce.urls')),
    ...
)

Установка FileBrowser и Grappelli

Перед установкой FileBrowser выполним установку Grappelli:

pip install django-grappelli

Установка FileBrowser

pip install django-filebrowser

Добавьте FileBrowser и Grappelli в INSTALLED_APPS (перед django.contrib.admin):

# название_проекта/settings.py
INSTALLED_APPS = [
    'grappelli',
    'filebrowser',
    'django.contrib.admin',
]

Добавьте сайт FileBrowser и Grappelli в свои шаблоны url (перед любыми адресами администратора (admin-urls)):

# название_проекта/urls.py
from filebrowser.sites import site

urlpatterns = [
    path('admin/filebrowser/', site.urls),
    path('grappelli/', include('grappelli.urls')),
    path('admin/', admin.site.urls),
]

Приложение для теста

Создадим приложение testPosts:

py manage.py startapp testPosts

Добавим код в модель models.py:

# название_проекта/testPosts/models.py
from django.db import models
from tinymce.models import HTMLField


class Film(models.Model):
    title = models.CharField(max_length=200)
    exerpt = models.TextField(max_length=200)
    content = HTMLField()

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

# название_проекта/settings.py
INSTALLED_APPS = [
    'testPosts.apps.TestpostsConfig',
    ...
]

Выполним создание миграции и миграцию приложения:

python manage.py makemigrations testPosts
python manage.py migrate

Добавим приложение в админку admin.py:

# название_проекта/testPosts/admin.py
from django.contrib import admin

from .models import testPosts

admin.site.register(testPosts)

Необходимо создать в коне 2 каталога media и static. Настройки для каталогов и TinyMCE:

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
PROJECT_DIR = os.path.dirname(__file__)

TINYMCE_SPELLCHECKER = True
TINYMCE_JS_URL = os.path.join(STATIC_URL, "tinymce/tinymce.min.js")
TINYMCE_JS_ROOT = os.path.join(STATIC_ROOT, "tinymce")

FILEBROWSER_DIRECTORY = ''
DIRECTORY = ''

X_FRAME_OPTIONS = 'SAMEORIGIN'

TINYMCE_DEFAULT_CONFIG = {
    "relative_urls": False,
    "remove_script_host": False,
    "convert_urls": True,
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 20,
    'theme': 'silver',
    'plugins': '''
            textcolor save link image media preview codesample contextmenu
            table code lists fullscreen  insertdatetime  nonbreaking
            contextmenu directionality searchreplace wordcount visualblocks
            visualchars code fullscreen autolink lists  charmap print  hr
            anchor pagebreak
            ''',
    'toolbar1': '''
            bold italic underline | fontselect,
            fontsizeselect  | forecolor backcolor | alignleft alignright |
            aligncenter alignjustify | indent outdent | bullist numlist table |
            | link image media | codesample |
            ''',

    'contextmenu': 'formats | link image',
    'menubar': True,
    'statusbar': True,
    "language": "en_US",
}

В файл настройки url проекта необходимо добавить + static. Мой итоговый код:

# название_проекта/urls.py
from django.contrib import admin
from django.urls import include, path
from filebrowser.sites import site
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/filebrowser/', site.urls),
    path('grappelli/', include('grappelli.urls')),
    path('tinymce/', include('tinymce.urls')),
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Переходим в админку создаем тестовый пост. У меня окно выглядит вот так

Жмем вставку картинки

Готовый код можно посмотреть на github https://github.com/SupportG/django-tinymce-filebrowser