W końcu zrobiłem porządek z edytorem

Są takie aktualizacje, które robi się od ręki. Są też takie, do których człowiek dojrzewa latami, patrząc na starą wersję oprogramowania i udając, że przecież „na razie działa”. Tak właśnie było u mnie z TinyMCE w Alib CyMeS.

Grafikę nagłówkową narysowało AI

W końcu jednak przyszedł ten dzień. Przy okazji porządnego odświeżania i aktualizowania mojego CMS-a, postanowiłem spróbować zaktualizować też edytor TinyMCE z mojej wiekowej wersji 3.5.12 do najnowszej 8.2.2.

Nie zrobiłem tego sam. Bardzo pomógł mi AI, który nie tylko podpowiedział, jak ogólnie połączyć edytor w CMS-em, ale też jak to cholerstwo skonfigurować.

Wiele lat z poprzednią wersją. Po co ruszać, skoro działa?

Stara wersja działała i nie sprawiała problemów. Ale wyglądała archaicznie i generowała kod może zgodny ze standardami, ale przeładowany drobiazgami, które obecnie nie są potrzebne.

Wiele razy przyglądałem się nowej. Była ładna i miała mniej plików. Ale nie bardzo mi się chciało spędzać nad tym wielu godzin, żeby spiąć z moim systemem. Może coś przeoczyłem, ale sądziłem, jest to wersja wyłącznie płatna i parę rzeczy działało nie tak jak chciałem i nie wiedziałem, czy będę w stanie dopasować to do swoich wymagań.

Chyba w końcu dojrzałem do tematu…

…i porządnie przysiadłem pośladki. Planowałem tylko zerknąć, a od komputera odszedłem dopiero rano. I muszę przyznać, że bez AI nie poszłoby to tak szybko.

Nie żeby AI napisał za mnie cały kod, ale jego podpowiedzi, nawet jeśli błędne, to nakierowały mnie na rozwiązania, na które sam nigdy bym nie wpadł.

TinyMCE wcale nie musi być płatny

Okazuje się, że jeżeli trzymając go na własnym hostingu, można zrobić to bezpłatnie. Co więcej, dostępny jest kod źródłowy. I to była dla mnie super informacja, bo dwóch rzeczy nie mogłem zrobić wyłącznie w opcjach konfiguracyjnych. I nie dlatego, że to wykraczało poza pomysły twórców, tylko dlatego, że to zepsuli (w starej wersji działało bez problemu) uznając zapewne, że nikomu to nie będzie potrzebne.

Jedną z rzeczy było zachowanie edytora podczas dodawania obrazków. Standardowo, jeśli w oknie dodawania obrazka nie podałem wysokości i szerokości, TinyMCE wstawiał do kodu oryginalne wymiary grafiki, a ja chciałem, żeby tam nic nie było. Usunąłem więc w kodzie źródłowym 3 linijki, zminimalizowałem i śmiga.

Druga sprawa to symbol dzielenia stron, czyli pagebreak. W starej wersji w oknie edytora był wyświetlany malutki czerwony napis. Teraz był to tylko kawałek ledwo widocznej ramki. Tego nie dało się zmienić konfiguracją, a przynajmniej nie w prosty sposób, którym było po prostu wstawienie kawałek SVG w odpowiednie miejsce. Na działanie nie ma to żadnego wpływu, ale na wyświetlanie podczas edycji owszem.

Tak naprawdę płatny TinyMCE nie ma nic, czego nie oferowałby mi darmowy, albo czego nie mógłbym dopisać sobie sam. Nie mam potrzeby posiadania setek funkcji z Worda, z których i tak nikt nie skorzysta, bo na stronie internetowej nie ma to sensu. Tu istotne jest, żeby edytor był mały i łatwy w opanowaniu.

Wreszcie porządek po kopiowaniu z Worda

W poprzedniej wersji odradzałem klientom kopiowanie treści bezpośrednio z Worda, bo przenosiło się więcej śmieci niż treści. Style, klasy, dodatkowe atrybuty, dziwne formatowanie i różnego rodzaju śmieci potrafią skutecznie zaśmiecić kod HTML. Dochodziło do tego, że niektóre przeglądarki nic nie wyświetlały.

W tej wersji było podobnie i, jak doczytałem, czyściciel jest dostępny wyłącznie w wersji płatnej. I tu również pomógł AI, bo okazuje się, że kilkanaście linijek w opcjach konfiguracyjnych robi robotę. Kilka ostatnich wpisów przeniosłem już bezpośrednio z edytora, z zachowaniem formatowania, ale bez żadnych śmieci.

Tę grafikę też narysowało AI

Manager plików

Ten też jest dostępny wyłącznie za pieniążki, ale oglądałem demo i średnio mi się podoba. Przeładowany i wielki. A przecież miałem swój, który napisałem do poprzedniej wersji. Okazuje się, że teraz można było go zintegrować jeszcze łatwiej niż kiedyś. Może nie jest taki wypasiony, ale szybki i klienci go lubią. A ja zawsze w prosty sposób mogę go rozbudować, bo wiem, co i jak działa.

Czy 1,5MB to dużo?

Tutaj dochodzimy do rzeczy, która boli mnie trochę bardziej. Nowy TinyMCE jest większy od mojej poprzedniej wersji o około 500kB. Wielu z Was pewnie prychnie pogardliwie, bo co to jest? Ale jak wiecie, ja mam świra na punkcie minimalizmu. Móc cały CMS (poza edytorem) to właśnie 500kB.

No ale coś za coś. Znalazłem mniejsze edytory, ale żadne nie dawał takich funkcjonalności jakie potrzebowałem i żadnego nie umiałem zintegrować z moim CMSem, nawet z pomocą AI. Pocieszam się myślą, że są też o wiele cięższe edytory. No i nowy TinyMCE ma dużo mniej plików niż kiedyś. Naprawdę sensownie go zoptymalizowano, co pozwoliło mi wywalić jeszcze trochę zbędnych rzeczy zostawiając zaledwie 23 pliki.

TinyMCE w Alib CyMeS

Aktualizacja do najnowszej wersji była nie tylko zwykłą podmianką. Przy tej okazji udało mi się:

• zintegrować nową wersję z Alib CyMeS
• uprościć integrację managera plików
• poprawić sposób dodawania obrazków i linków
• poprawić wizualne oznaczenie pagebreak
• dodać własne czyszczenie kodu po kopiowaniu z Worda
• usunąć sporo zbędnych śmieci
• zachować całość na poziomie około 1,5 MB

Nie czytaj dalej tylko sprawdź

Edytor jest zintegrowany z najnowszą wersją Alib CyMeS, który jest do pobrania za darmo razem z 3 fajnymi szablonami.

Zobacz darmową wersję Alib CyMeS

Sam TinyMCE też jest do pobrania, także w polskim plikiem językowym i wersją źródłową.

Zobacz TinyMCE

A ja mam spokój z edytorem na kolejne 5 lat, aż zmieni się technologia i standardy.