Ich habe die Tage viele neue Sachen ausprobiert und musste dabei festellen, das es noch viel bessere Dinge gibt als die, die ich schon benutze. Ein Rich Text Editor zum Beispiel. Der Editor von dem ich rede ist TinyMCE. Das Teil ist wirklich ziemlich beeindruckend. Ich habe bis jetzt nur den YUI Editor für diese Seite verwendet, was sich aber definitiv ändern wird!
TinyMCE ist schon richtig ausgereift und bietet eine Unmenge an Plugins. Hätte ich diesen Editor früher getestet hätte ich mir wahrscheinlich eine menge an Programmieraufwand erspart. Ich habe auch gleich mal eine kleine Verbesserung an dem advImage Plugin gemacht. Es gibt dort die Möglichkeit über eine Liste Bilder auszuwählen. Das Ganze muss jedoch implementiert werden und hat den Nachteil, dass die Liste eindimensional ist. Hier mal eine kleine Amleitung zum Bauen einer Optgroup Liste.
Als erstes müsst Ihr euch eine Javascriptdatei anlegen, die Ihr bei bedarf Serverseitig erzeugen könnt. Diese Dateil enthält lediglich ein Array mit den Pfadangaben zu den Bildern. Alternativ kann das Array auch im EditorCode verankert werden.
//image_list.js var tinyMCEImageList = new Array( // Name, URL ["Logo 1", "media/logo.jpg","bla"], // index 0 = Name, 1 = Value, 2 = Optgroup Label ["Logo 2", "media/logo.jpg","hmmm"], ["Logo 3", "media/logo.jpg","hmmm"] }
Nun muss die image.js im Verzeichnis: plugins/advimage/js/image.js so aber der Zeile 289 ein wenig geändert werden damit wir eine Optgroup erhalten. Der Code ist ziemlich selbsterklärend.
fillFileList : function(id, l) {
var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
l = window[l];
if (l && l.length > 0) {
var optgrouparr = new Array();
tinymce.each(l, function(o) {
// prüfen ob schon eine optgroup existiert ansonsten nur options anlegen
if(optgrouparr.inArray(o[2]) == null){
optgroup = document.createElement('optgroup');
optgroup.label = o[2];
option = document.createElement('option');
option.value=o[0];
option.innerHTML = o[1];
optgroup.appendChild(option);
optgrouparr[o[2]] = optgroup;
}else{
option = document.createElement('option');
option.value=o[0];
option.innerHTML = o[1];
optgrouparr[optgrouparr.inArray(o[2])].appendChild(option);
}
});
// lst die optgroups übergeben
for(bla in optgrouparr){
if(bla != 'inArray')
lst.appendChild(optgrouparr[bla]);
}
} else
dom.remove(dom.getParent(id, 'tr'));
},
Das war es dann auch schon. Ihr müsst nun nur noch dem Erklären wo er euer Daten Array suchen muss. Hiefür gibt es extra eine Config Property
... external_image_list_url : " /path to /image_list.js", ...
Damit kann man schon mal ein bisschen mehr Anfangen, da man so BIlder in Verzeichnissen ordnen kann.
created on 2008-05-21 11:57:01
Work in progress, Comments will be available again soon.
