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.
Xinha integrieren
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:
Integration mit dem Filebrowser
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!
Trackbacks
Zoo sex pictures animal porn movies beast trailers. Animal sex zoo free porn bestiality.
Comments
Cooles Plugin. Habe einen Link von der FileBrowser Trac-Seite auf dieses Posting eingebunden.
Xinha, auch wenn es interessant ist, unterstuetzt leider Opera noch nicht.
Es scheint als wenn TinyMCE, so fern man sich nicht auf bestimmte Browser beschraenken will, die am weitesten fortgeschrittene Moeglichkeit ist.
Ich habe selbst mit TinyMCE sehr unterschiedliche Erfahrungen gemacht. Allerdings sind die Bugs oft aergerlich.
Das haste recht, Xinha unterstützt auch keinen Safari...beides nicht so ganz gelaungen. Ich hoffe dass der WYMEditor langsam besser wird.
Der TinyMCE hat mich in Wordpress und beim Versuch ihn einzurichten so verärgert, dass ich es leider nicht weiter durchgehalten habe :)!
Gute kurze Anleitung! Danke.
Sehr tolle Anleitung, vielen Dank! Ich hoffe, dass ich bald Zeit habe mich damit zu beschäftigen.
Sehr hilfreiches Plugin, genau das was ich mein aktuelles projekt brauchte.
allerdings fehlt noch der popup ersatz für andere dateien als bilder ("link einfügen").
ist das noch geplant?
Mmh, ne eigentlich nicht...
Aber ist das bei dem Link-Popup nicht auch einfach nur ne CSS-Frage? Das dürfte sich doch in dem Xinha-Release super schnell fixen lassen, oder ?