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 модели и найдите там настройку ее отображения:
Здесь класс Media позволяет подключить на странице редактирования модели в админке
Django дополнительные скрипты, путь к которым указывается в параметре js.
4. Обратите внимание на кастомный файл tiny_mce_init.js. Он нужен для активации
редактора:
Теперь откройте в админке Django страницу редактирования модели. Там вы должны увидеть вместо textarea редактор TinyMCE.
5. Хотите изменить вид редактора? Можете использовать вот такие настройки в файле tiny_mce_init.js:
Редактор примет следующий вид:
Примечание: В п.3 имеет место нарушение DRY-принципа, т.к. при подключении редактора TinyMCE в разных моделях, нам нужно будет повторить указание пути к скрипту несколько раз. А что, если путь к скрипту редактора поменяется? Решить эту проблему может вынос данного пути в settings.py.
Поэтому скачиваем версию 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.
Комментариев нет:
Отправить комментарий