django-oscar tinymce 4 filebrowser

Задача: в дашборде django-oscar загружать изображения

1. Установка django-filebrowser-no-grappelli

- Открываем проект, загружаем виртуальное окружение и устанавливаем django-filebrowser-no-grappelli

$ pip install django-filebrowser-no-grappelli

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

INSTALLED_APPS = (
    ...
    'filebrowser',

)

и

FILEBROWSER_DIRECTORY = './'

последнее, это путь относительно MEDIA_ROOT, куда будет иметь доступ приложение filebrowser (я поставил корень, но можно настроить и на вложенную папку)

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

urlpatterns = [
    url(r'^admin/filebrowser/', include(site.urls)),
    ...
]

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


2. Прикручиваем filebrowser к django-oscar dashboard

По умолчанию в django-oscar dashboard стоит визуальный редактор для текстовых полей tinymce 4, добавляем для него настройки:

- в templates проекта создаем dashboard/layout.html со следующим содержимым:

{% extends "oscar/dashboard/layout.html" %}

{% block onbodyload %}
    options = {
        'languageCode': '{{ LANGUAGE_CODE }}',
        'tinyConfig': {
            valid_children : '+body[li],',
            entity_encoding: 'raw',
            statusbar: false,
            relative_urls : false,
            convert_urls : false,
            menubar: false,
            plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table contextmenu paste code image'
            ],
            style_formats: [
                {title: 'Heading', block: 'h2'},
                {title: 'Subheading', block: 'h3'}
            ],
            toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | code',

            file_browser_callback: function(input_id, input_value, type, win){
                var cmsURL = '/admin/filebrowser/browse/?pop=4';
                cmsURL = cmsURL + '&type=' + type;
  
                tinymce.activeEditor.windowManager.open({
                    file: cmsURL,
                    width: 800,  // Your dimensions may differ - toy around with them!
                    height: 600,
                    resizable: 'yes',
                    scrollbars: 'yes',
                    inline: 'yes',  // This parameter only has an effect if you use the inlinepopups plugin!
                    close_previous: 'no'
                }, {
                    window: win,
                    input: input_id,
                });
                return false;
            },
        }
    };
    oscar.dashboard.init(options);

    {{ block.super }}
{% endblock %}


На этом все, можно переходить в дашборд и добавлять изображение для текстовых полей.