TinyMCE fajnym edytorem jest. Problem leży jednak w tym, że czasem zbyt fajnym (bo nikt nie odważy się przecież powiedzieć klientowi, że program jest fajny, tylko jego użytkownicy są głupi ;-). Przycisk dodawania obrazków do dokumentów przyprawia o ból zębów każdego, kto ma jakiekolwiek poczucie estetyki (innej niż ta z Cepelii). Userzy wrzucają je całkowicie bezmyślnie, bez formatowania i najczęściej w absurdalnych rozdzielczościach i w ogóle robią bydło.

Rozwiązanie jest proste - zabierz userom przycisk obrazka, a w zamian daj własny widget do zarządzania fotografiami i rozkładaj je w dokumencie automatycznie. Pisanie uploadera, thumbnailera i obsługi listy to banał i był wałkowany milion razy, bardziej zagadkowe jest natomiast równomierne rozłożenie obrazków w dokumencie.

Pierwotnie próbowałem rozwiązać ten problem po stronie serwera - zliczać paragrafy i wklejać tagi IMG. Nie mogąc uzyskać zadawalających wyników, przeniosłem kod do klienta. Oto implementacja w Javascripcie:

spreadImages = function (bodyId, imagesId) {
	var bw = document.getElementById(bodyId);
	var iw = document.getElementById(imagesId);
	var ps = bw.getElementsByTagName('P');
	var imgs = iw.getElementsByTagName('IMG');
	var n = imgs.length; // ważne by skopiować rozmiar tablicy
	var left = true;
	var d = ps.length / imgs.length;
	for (var i = 0; i < n; ++i) {
		var tmp = iw.removeChild(imgs[0]);
		var p = ps[Math.round(d * i)];
		p.insertBefore(tmp, p.firstChild);
		tmp.style.cssFloat = left ? 'left' : 'right';
		tmp.style.styleFloat = left ? 'left' : 'right';
		left = !left;
	}
};

Jak widać zadanie nie okazało się wcale takie trudne. W wywołaniu podajemy dwa parametry. Pierwszy to identyfikator elementu otaczającego dokument, drugi to identyfikator elementu zawierającego obrazki. Na dowód, że kod działa zamieszczam poniżej kilka fotografii z wycieczki na Giants Causeway w Północnej Irlandii, oraz magiczny przycisk.