Интро

Я по прежнему продолжаю изучать Django + Python. Пока этот тандем не перестает меня радовать. И все больше усилий мне приходится делать над собой, чтобы разрабатывать на работе на PHP с использованием самописного фреймворка.

И вот, на одном из сайтов понадобился WYSIWYG-редактор.

TinyMCE

Моим первым претендентом на звание django-редактора был TinyMCE. Однако “из коробки” он не умеет загружать фото на сервер. На форумах и блогах эту задачу предлогают переложить на плечи django-filebrowser.

Однако, решение не самое быстрое, в плане затраченного времени. И тогда, я вспомнил, что в редакторе FCKeditor уже есть обработчики для Python. И даже успел порадоваться.

FCKeditor & напильник

Радость была не долгой. Как оказалось, приложение django-fckconnector для подключения  вообще не работает. Ну, делать нечего - будем лечить (или калечить, как получится)

Берем из репозитория последнию версию fckconnector:

svn checkout http://django-fckconnector.googlecode.com/svn/trunk/ django-fckconnector

Открываем файл fckeditor/connector/__init__.py и в самом конце находим строки:

try:
    from elementtree import ElementTree
except ImportError:
    try:
        import lxml.etree as ElementTree
    except ImportError:
        raise ImportError, "Neither elementtree.ElementTree nor lxml.etree was found. This is required by fckeditor_connector"

заменяем их на:

try:
    from xml.etree import ElementTree
except ImportError:
    from elementtree import ElementTree

Далее редактируем файл fckeditor/connector/actions.py. Находим функцию file_upload и все вхождения new_file['filename'] и new_file['content'], заменяем на new_file.name и new_file.read(), соответственно (!).

Теперь можно отложить напильник и приступить к установке и настройке приложения.

Установка

В urls.py добавляем строку:

...
(r'^fckeditor_connector/', include('fckeditor.connector.urls')),
...

В settings.py в INSTALLED_APPS добавляем ‘fckeditor’.

Скачиваем сам FCKeditor. И переносим папку с fckeditor в свое media-каталог, указанный в MEDIA_ROOT.

Далее открываем на редактирование файлик fckeditor/fckconfig.js, находим строки:

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;

и заменяем строку FCKConfig.ImageBrowserURL = … на

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor_connector/browser/';

Осталось только вызвать редактор в админке:

class FooAdmin(admin.ModelAdmin):
   js = ( 'fckeditor/fckeditor.js',
          'fckeditor/textareas.js',)

Где, примерный вид fckeditor/textareas.js:

window.onload = function()
{
    var oFCKeditor = new FCKeditor( 'id_content' ) ;
    oFCKeditor.BasePath    = '/media/fckeditor/';
    oFCKeditor.ReplaceTextarea() ;
}

id_content - это ID поля в к которому мы хотим применить редактор. Думаю, не сложно изменить данный скрипт, для того чтобы редактор применялся ко всем элементам типа <textarea>.

Так же не забываем создать каталог uploads в своем MEDIA_ROOT-каталоге, по-умолчанию в этот каталог FCKEditor сохраняет картинки.

Вот и все. Все предельно “юзер-френдли” )))