Tim Adler

Der Schlüssel für ein CMS, dass Pflege ohne HTML ermöglichen soll, ist u.a. die Möglichkeit Richtext einzugeben, d.h. Textformatierungen und Bilder in Fließtext und Inhalte einzufügen. Richtext-Editing bedeutet dabei fast immer, dass man dem User im Backend eine WYSIWYG-Lösung anbietet. Django selber bringt keine vordefinierte Möglichkeit mit. Das hat aber unter anderem den Vorteil, dass man seinen Lieblingseditor frei wählen kann und auch mit Updates immer auf dem neuesten Stand ist. Die Integration ist letztendlich nicht wirklich schwierig.

Ich verwende dabei Xinha, hauptsächlich auf Grund der schlechten Erfahrungen mit TinyMCE und FCKEditor bzgl. Stabilität und UI. Cool scheint auch der WYMEditor, weil er den besten XHTML/CSS-Markup verspricht, aber der ist noch nicht wirklich produktionsreif. Zusätzlich kann man Xinha noch über ein Plugin mit dem phänomenalen Filebrowser vertüdeln.

Folgende Schritte muss man zur Integration unternehmen. Später lassen sich die Felder, die man per Richtext editieren will sogar auf Klassen/Model-Basis definieren:

Aktuelle Xinha-Distribution von der Xinha-Seite herunterladen und im "media"-Verzeichnis des Django-Projekts unterbringen. Danach die xinha.js-Datei entsprechend anpassen und die _editor_url setzen.

Im Xinha-Ordner macht man nun eine Kopie der xinha-config.js und nennt sie <Klassenname>-config.js. Für die Klasse "Post" beispielsweise post-config.js. In dieser neuen Datei muss man nun noch eine Kleinigkeit ändern. Dazu muss man wissen, dass alle Textareas, die Django im Backend automatisch erstellt, immer eine ID erhalten, die "id_<Attributname>" ist. Man kann also beliebig viele Textareas in Editoren umwandeln, indem man sie einfach in den entsprechenden Bereich in der Konfiguration einträgt:

  xinha_editors = xinha_editors ? xinha_editors :
  [
    'id_attribut1',
    'id_attribut2',
    ...
  ];

Danach die models.py derjenigen Applikation editieren in der ein Attribut einer Klasse per Xinha editiert werden soll. Django erlaubt es für jede Klasse extra JavaScripts in die Edit/Create-Seite mit einzubinden und hierüber bindet man nun die Xinha-JavaScripts und die eigene Konfigurationsdatei mit ein. Dazu ändert man die innere "Admin"-Klasse der entsprechenden Klasse:

    class Admin:
        ...
        js = ('../media/xinha/xinha.js','../media/xinha/htmlarea.js',
             '../media/xinha/<Klassenname>-config.js')

Dabei nochmal darauf achten, dass die eigene "media"-Pfad stimmt. Evtl. muss man auch eine absolute Addressierung verwenden. Sonst sollte das Ganze dann aber so aussehen:

Bis hierhin ist die Integration von Xinha mit Django nur eine von vielen. So sieht man sie auch in jedem beliebigen CMS um die Ecke. Richtig cool wird es aber, wenn man den "Bild einfügen"-Dialog von Xinha direkt mit dem Filebrowser-Plugin (seperat erhältlich, und zwar hier) vertüdelt. Dadurch erspart man dem User die Bilder im Filebrowser-Bereich hochzuladen und dann per Copy-Paste erst in den Inhalt zu bringen. Filebrowser selber bringt bereits ein Plugin für TinyMCE mit, aber...naja, der Worte sind bereits genug verloren.

Das benötigte Plugin für Xinha ist selbstgeschrieben und kann weiter unten heruntergeladen werden. Es ersetzt den Standarddialog für das Einfügen einer Grafik. Auf dem Weg habe ich auch gleich einige unbenötigte Eigenschaften für Grafiken (Border, Vspace, Hspace...) entfernt. Die gilt es ja heutzutage per CSS zu definieren. Der neue Dialog schaut dann ungefähr so aus:

Über die Lupe öffnet sich der Filebrowser in einem Popup und man kann Bilder auswählen und neue hochladen. Der blaue Pfeil übernimmt das Bild in den "Bild einfügen"-Dialog. Nun aber das entsprechende Plugin:

DjangoFilebrowser.zip (6.3KB)

Den Inhalt entpackt man einfach in "plugins"-Verzeichnis in der Xinha-Distribution. Danach editiert man wiederum die <Klassenname>-config.js und fügt das Plugin in der Konfiguration hinzu: 

  xinha_plugins = xinha_plugins ? xinha_plugins :
  [
   ...
   'DjangoFilebrowser',
   ...
  ];

That's all folks! Hope you like it!