Sharegon 2.0 - Poznajcie nowy edytor tiptap!

Cześć wszystkim 🖐️

 

To pierwsze z serii postów, w których przybliżymy Wam zmiany w ramach aktualizacji Sharegon 2.0. Naszym celem jest uczynienie forum bardziej nowoczesnym, funkcjonalnym, a więc rozpoczynamy od fundamentalnych zmian, a jest nim całkiem nowy edytor tekstu. Aktualnie używamy edytor to ckeditor4 w przestarzałej wersji początkowo miał zostać zaktualizowany do wersji 5 natomiast nastąpiła zmiana i został wdrożony całkiem nowy edytor tiptap https://tiptap.dev/product/editor który jest oparty o nowoczesne technologie React, Vue. 

 

Dlaczego akurat Tiptap?

Wybór stanął na Tiptap, ponieważ to nowoczesne, open-sourcowe rozwiązanie, które daje ogromne możliwości rozbudowy. Dzięki niemu będziecie mogli tworzyć bardziej dynamiczne, przejrzyste i zaawansowane tematy, wykorzystując nowe opcje formatowania i interaktywne elementy. To dopiero bazowa wersja, ale w przyszłości planujemy jej dalszy rozwój, dodając kolejne funkcjonalności w tym integracje z AI, które jeszcze bardziej ułatwią edycję i organizację treści.

 

Prezentacja nowego edytora

 

Na pierwszy rzut oka, pewnie zauważyłeś że narzędzia zostały dużo lepiej pogrupowane za chwilę przejdziemy do omówienia nowych zmian. Oczywiście edytor jest w pełni responsywny i bardzo mocno zoptymalizowany pod aplikację mobilną Sharegon. Także załadowanie tego edytora będzie niemal natychmiastowe po kliknięciu w pole. 

 

Opcja 1 - ustawienia

 

Możesz tu ustawić nagłówki od H1 do H6, które są niezbędne dla odpowiedniego dostosowania struktury strony zwłaszcza pod względem SEO, a więc teraz będzie można bez problemu dodać je. Domyślnym ustawieniem jest tu paragraf, który również dodaje odpowiednie tagi html. I ostatnią opcją jest wstawienie bloku kodu, które będzie dla nas bardzo przydatne tworząc poradniki. Sprawdźmy, co zmienia się w nowym bloku kodu i w jaki sposób się prezentuje. 

 

Przedstawienie nowego bloku kodu

 

Oczywiście możemy wybrać wiele nowoczesnych języków, ale przejdźmy do podświetlenia składni i bloku kodu po dodaniu w temacie. 

 

Składnia jest podświetlana wszystkie nowe słowa kluczowe w najnowszym standardzie. W przyszłości dodamy tu jeszcze przycisk w prawym górnym roku, który za pomocą jednego kliknięcia skopiuje cały blok. 

 

Opcja 2 - wstawianie

 

Mamy dwa rodzaje listy uporządkowana i numerowana tu akurat nie zmienia się wiele. Z tym że podwójne kliknięcie entera automatycznie anuluje listę. 

 

 

Nowoczesne kontenery – nowa wersja spoilera!

Wprowadzamy kontenery, czyli zupełnie nową funkcję umożliwiającą dodawanie nowoczesnych, estetycznych bloków do postów. To ulepszona wersja spoilera, ale z jeszcze większymi możliwościami!

 

🔹 Domyślnie otwarty lub ukryty – możesz zdecydować, czy kontener ma być od razu widoczny, czy rozwijany po kliknięciu, tak jak obecne spoilery.
🎨 Personalizacja – nadaj kontenerowi własny tytuł, zmień kolor i dostosuj jego położenie w treści postu.
🚀 Więcej kontroli – lepsza organizacja treści i możliwość wyróżnienia ważnych informacji w nowoczesny sposób.

 

 

 

Jeden z większych problemów z ustawianiem kursora rozwiązany! 

Pewnie nie raz miałeś problem z ustawieniem kursora we właściwym miejscu. Dodałeś blok kodu, cytat czy wkleiłeś załącznik, obrazek i miałeś problem z poprawnym ustawieniem kursora - pomimo klikania nic się nie działo. W nowym edytorze pewnie zauważyłeś już dwie niebieskie strzałki na górze i dole danego elementu właśnie one rozwiązują ten problem, gdy chcesz ustawić kursor na dole lub na górze klikasz ten przycisk a kursor zostanie odpowiednio ustawiony. 

 

Kolejna opcja to linia oddzielająca, którą możemy oddzielać pewne sekcje. 

 

Ostatnim nowym elementem są długo wyczekiwane Tabele! 

Ta funkcja jest jeszcze w fazie rozwoju, ale będzie dostępna od razu. W późniejszym czasie planujemy kolorowanie kolumn, aktualnie możliwe jest tylko blokowanie kolumny. 

 

Widok tabeli w temacie

 

Kolejne opcje w edytorze to: pogrubienie, kursywa i podkreślenie, a następnie mamy opcję wyboru rozmiaru tekstu w procentach oraz zaraz obok ustawienie koloru. Wszystkie kolory, które są do wyboru są odpowiednio dobrane, aby były dobrze widoczne. Zaraz obok mamy opcję do wstawienia linku wraz z tekstem. 

 

Nowoczesne Emoji i Ikony Font Awesome v6

Nie tylko dodajemy najnowszą wersję Emoji, ale idziemy o krok dalej! Dodajemy obsługę ikon z Font Awesome v6, co pozwoli na jeszcze większą personalizację i lepszą estetykę tworzonych tematów.

 

Nie może zabraknąć GIFÓW! 

Możesz wstawić dowolne gify do tematów w ciągle aktualizowanej bazy gifów! 

 

Kod w linii 

Jeszcze jednym z dość przydatnych rozwiązań jest wstawianie kodu inline czyli w środku tekstu. W ostatniej grupie narzędzi znajdziemy również ustawienie tekstu, zmiana czcionki czy zakreślenie tekstu. Możesz również przekreślić tekst ustawić indeks dolny i górny. 

 

Nowoczesne osadzanie postów z portalu X, shortsów wkrótce również fb. 

 

Dodatkowo po wstawieniu obrazu możesz go dowolnie skalować lub ustawić wyświetlanie z prawej lub lewej strony.

 

Przykładowy temat z wykorzystaniem różnych nowych elementów oraz pozycjonowania.

 

Dzięki tym zmianom tworzenie estetycznych i przejrzystych tematów będzie jeszcze prostsze. 

Oczekujcie na kolejne tematy z zapowiedzi w tym tygodniu. 

 

Z poważaniem, 

Administracja Sharegon.pl