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.



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