TinyMCE. Добавляем редактор в админку Django

Четверг, 19 Дек. 2013 by Kirill Shershen


Первым делом для блога нужно обзавестись нормальным WYSIWIG редактором. Остановился на Tinymce, потому что первый попался на глаза и вроде норм. Осталось скачать и прикрутить его к полям TEXTAREA в админке. На данный момент доступна версия 4.0.12, но я остановился на версии 3.xx потому что там как то более информативно и привычно всё отображается. Далее два варианта. Либо скачать архив с tinymce и положить его в static и там настроить, либо скачать приложение django-tinymce(pip install django-tinymce) в  settings.py прописать tinymce в INSTALLED_APPS и прописать настройки. Второй вариант я пробовал, но было много проблем, которые я всё же победил, но смысл от него я так и не понял. 

Первый вариант проще, закинул папку в static, создал файл tiny_mce_init.js в котором прописал настройки редактора, далее прописал в admin.py:

class CollectionAdmin(admin.ModelAdmin):
    class Media:
        js = ('%stinymce/tiny_mce.js' % settings.STATIC_URL,  
              '%stinymce/tiny_mce_init.js' % settings.STATIC_URL,
)

и добавил CollectionAdmin во все модели в которых хочу видеть редактор, в том числе и FlatPages.

сюда tiny_mce_init.js прописывал настройки которые нашел гуглением, плюс чтото добавлял сам

tinyMCE.init({
    mode:"textareas",
    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",
    extended_valid_elements :  'script[type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],div[*],p[*],object[width|height|classid|codebase|embed|param],param[name|value],embed[param|src|type|width|height|flashvars|wmode]',
    // Theme options
    theme_advanced_buttons1 :  "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,sub,sup,|,forecolor,backcolor,formatselect,fontsizeselect",
    theme_advanced_buttons2 :  "preview,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,tablecontrols,removeformat,code,emotions",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true
});

С такими настройками на локальном сервере должно всё работать. На продакшене придется дополнительно прописать document.domain = 'yourdomain'; в начало файлов tiny_mce_popup.js и tiny_mce.js чтобы нормально открывались всплывающие окна. Хотя может и без этого заработает. Чтобы заработало на Heroku пришлось:

  • завести свой домен 2kxe.ru
  • переименовать корзину на амазоне s3 в static.2kxe.ru
  • прописать в настройках домена static CNAME static.2kxe.ru.s3.amazonaws.com.
  • прописать STATIC_URL = http://static.2kxe.ru/
  • прописать домен в document.domain

Теги: django , tinymce


blog comments powered by Disqus