суббота, 6 июля 2013 г.

Подключение редактора TinyMCE к админке Django

1. Скачиваем TinyMCE. 4 версия редактора выглядит массивно и скучновато:



Поэтому скачиваем версию TinyMCE 3.5.8, которая выглядит так:


2. Распаковываем скачанный архив, копируем папку tiny_mce в папку static своего проекта.
Папка tiny_mce должна содержать внутри папки langs, plugins...

3. Теперь нужно сообщить админке Django, в каких моделях мы хотим заменить
textarea на WYSIWIG редактор TinyMCE.
Настройка отображения модели в админке Django делается в файле admin.py.
Откройте файл admin.py модели и найдите там настройку ее отображения:

class CollectionAdmin(admin.ModelAdmin):

    # .. какие-то настройки отображения

    class Media:
        js = (
            '/static/tiny_mce/tiny_mce.js',
            '/static/tiny_mce/tiny_mce_init.js',
        )

admin.site.register(Collection, CollectionAdmin)

Здесь класс Media позволяет подключить на странице редактирования модели в админке
Django дополнительные скрипты, путь к которым указывается в параметре js.

4. Обратите внимание на кастомный файл tiny_mce_init.js. Он нужен для активации
редактора:

tinyMCE.init({
    mode:"textareas"
});

Теперь откройте в админке Django страницу редактирования модели. Там вы должны увидеть вместо textarea редактор TinyMCE.

5. Хотите изменить вид редактора? Можете использовать вот такие настройки в файле tiny_mce_init.js:
tinyMCE.init({
    mode:"textareas",
    language : "ru",
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,sub,sup,|,forecolor,backcolor,formatselect,fontsizeselect",
    theme_advanced_buttons2 : "outdent,indent,|,undo,redo,|,link,unlink,anchor,image,tablecontrols,removeformat,code",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true
});

Редактор примет следующий вид:


Примечание: В п.3 имеет место нарушение DRY-принципа, т.к. при подключении редактора TinyMCE в разных моделях, нам нужно будет повторить указание пути к скрипту несколько раз. А что, если путь к скрипту редактора поменяется? Решить эту проблему может вынос данного пути в settings.py.

Комментариев нет:

Отправить комментарий