Hauptseite » Projekte » Bug(fix) im Colorpicker bei tinyMCE

Bug(fix) im Colorpicker bei tinyMCE

The Colorpicker from tinyMCE is a mess.
It takes a very long time from click to show the color matrix
Here's my solution to speedup this ugly behavior.

Es ist eine Qual mit dem Colorpicker von tinyMCE zu arbeiten, weil bei jedem Klick eine lange Zeit verstreicht, bis die Colormatrix erscheint.
Das hat mich dazu gebracht, einmal nach den Ursachen zu forschen. Und siehe da, die Lösung des Problems ist ganz einfach.
Die Überraschung, der Colorpicker wird jetzt in 1 Sekunde geladen.

qhhxm

Das Problem liegt in der Funktion renderColorMap()

Hier wird 216 mal ein Bild(spacer.gif) geladen, Das bringt manche Browser dazu, 216 mal zu prüfen, ob dieses Bild geladen werden kann, und das kann dauern.

Dabei wäre es so einfach. Man muss nur das Bild durch ein & n b s p ; ersetzen.

Hier ist nun die geänderte Funktion.

The updated function:

function renderColorMap() { var html = ""; var inputColor = convertRGBToHex(tinyMCE.getWindowArg('input_color')); html += '<table border="0" cellspacing="1" cellpadding="0">' + '<tr>'; var color; var ll = colors.length; for (var i=0; i<ll; i++) { color = colors[i]; html += '<td bgcolor="' + color + '">' + '<a style="text-decoration:none;" href="javascript:selectColor();" title="' + color + '"onfocus="showColor(\'' + color + '\');" onmouseover="showColor(\'' + color + '\');">' + '<div style="width:10px;height:10px;">&nbsp;</div>' + '</a></td>'; if ((i+1) % 18 == 0) html += '</tr><tr>'; } html += '<tr><td colspan="18">' + '<table width="100%" border="0" cellspacing="0" cellpadding="0">' + '<tr><td>' + '<img id="selectedColor" style="background-color:' + tinyMCE.getWindowArg('input_color') + '" border="0" src="images/spacer.gif" width="80" height="16" />' + '</td><td align="right">' + '<input id="selectedColorBox" name="selectedColorBox" type="text" size="7" maxlength="7" style="width:65px" value="' + inputColor + '" />' + '</td></tr>' + '</table>' + '<div style="float: left"><input type="button" id="insert" name="insert" value="{$lang_theme_colorpicker_apply}" style="margin-top:3px" onclick="selectColor();"></div>' + '<div style="float: right"><input type="button" name="cancel" value="{$lang_cancel}" style="margin-top:3px" onclick="tinyMCEPopup.close();" id="cancel" /></div>' + '</td></tr>' + '</table>'; document.write(html); }

Simply replace the function in color-picker.js with the code above and you will see a surprise.


TrackBack

TrackBack-URL zu diesem Eintrag: http://vsrv.de/mt-cgi/mt-tb.cgi/78

Kommentar schreiben

(Ihr Kommentar wird zeitverzögert freigeschaltet. Danke für Ihre Geduld.)














Sitemap


no software patents


Home

Tu dich fei besinne
bleib immer emol stieh,
kimmst ah dorten hie
wu de hie willst.
Denn miet Eil un Hast
hat manicher in senn Labn
oft's Schennste verpasst.

Powered by
Movable Type 3.2