The last days I have tested lot's of new stuff. One of the coolest thing I have discovered was a new rich text editor. It's called TinyMCE and is a very sophisticated WYSIWYG editor with lot's of cool features. I have also implemented a new syntax highlightning.
This editor brings tons of plugins in its package and had saved me many development by extending the YUI editor. But ok I have learned much by doing this and it was not wasting time I guess. As I have tested the TinyMCE editor and noticed a small deficite in displaying an image list. The plugin advImage provides the possibility to select a image from a list, which will be included in the following. This list is only one dimensional, but it would be nice to group images. You can realise that with the use of optgroups. The next part describes the way I have implemented such optgroups in the plugin.
The first thing you have to do is to create a javascript file with the name image_list.js. It is not nessaray to create one but it is the suggested way from TinyMCE. Alternativly you can provide the following data array directly in the editor code.
//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"] }
Now you have to edit the file image.js in the directory: plugins/advimage/js/image.js at line 289 to add our optgroup. The code is really simple, so many comments are not necesscary, I hope so.
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) {
// check for an existing key
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);
}
});
// provide the lst var with our saved optgroups
for(bla in optgrouparr){
if(bla != 'inArray')
lst.appendChild(optgrouparr[bla]);
}
} else
dom.remove(dom.getParent(id, 'tr'));
},
That's all. You only have to explain your editor where it has to search for your data array. For such a case it exist a special property.
... external_image_list_url : " /path to /image_list.js", ...
Now you have an image list with images grouped in folders !
created on 2008-05-21 11:57:01
Work in progress, Comments will be available again soon.
