Skocz do zawartości

Sharegon 2.0 - Poznajcie nowy edytor tiptap!

Opublikowano

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

image.png.f17f59cd29415cf01d664fe9915c0f0c.png

 

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

GIF10_02.202500-10-12.gif.a86328ab9bb1f207837bf231c99018e0.gif

 

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

GIF10_02.202500-15-59.gif.467f59a95ba8d7654b000d10332b3d47.gif

 

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. 

image.png.a56fde0b708bd78fb2df63fa4346623c.png

 

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

image.gif.f080c6639cdd146c7f31499a3e364136.gif

 

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ę. 

image.gif.33ef919ffcee2b3c537bf38b8449d5ab.gif

 

 

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.

 

image.gif.7fbef6c6b022f231bbe7fd4b5360efc0.gif

 

image.gif.1502a5745c64567da280a1465bb6841e.gif

 

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. 

GIF10_02.202500-35-43.gif.df854e23e3a91f994adfb584f40ed883.gif

 

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

GIF10_02.202500-38-01.gif.dae1a14d29b3649837cdabbb63bca636.gif

 

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. 

GIF10_02.202500-40-48.gif.5cd73b71ff08f9bb3147f3427edc652d.gif

 

Widok tabeli w temacie

image.png.a182db4c65b52b99455551062ea0934e.png

 

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. 

GIF10_02.202500-45-42.gif.b5c5f1b074987bd3cdd139dc338ef66a.gif

 

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.

GIF10_02.202500-48-22.gif.f929391e1c88d6f60ee0cf36f06e619a.gif

 

Nie może zabraknąć GIFÓW! 

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

image.gif.6c3bda984515dc4c240b69f2ba8b74d3.gif

 

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. 

image.gif.07b7bf80e21da7af1efefcdd13cb4e2d.gif

 

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

image.gif.4262219aa46f4ab01a8c62abe0b341d1.gif

 

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.

image.png.b8877b8bc645adfcf79c94367ea92c5a.png

 

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 

Featured Replies

Brak postów do wyświetlenia.
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.