Spraw, by Twój Drupal 9 CKEditor Pop – 7 przydatnych modułów, o których istnieniu nie wiedziałeś

Edytor treści to w zasadzie najważniejsza funkcja systemu CMS. Z potężnym narzędziem, takim jak CKEditor jako domyślnym narzędziem do edycji tekstu, Drupal znacznie ulepszył swoją grę zarządzania treścią, wprowadzając kilka nowych funkcji dla Drupala 8/9, takich jak system widżetów CKEditor i zaawansowany filtr treści (ACF). Więc tak, jest całkiem potężny nawet z domyślnymi funkcjami… Ale możesz naprawdę poprawić swoją grę CKEditor za pomocą niektórych modułów i wtyczek. Czytaj dalej, aby poznać nasze podejście do najlepszych i najciekawszych dodatków rozszerzających funkcje i użyteczność CKEditor.

Edytor Drupal 9 CKEditor

Po pierwsze, dla nowych użytkowników Drupala, CKEditor 4.5 jest domyślnym bogatym edytorem WYSIWYG (What you see is what you get) w Drupal 8/9. Jest to edytor tekstu, który pomaga administratorom witryn pisać i edytować treść bezpośrednio na stronach internetowych. Podobnie jak Drupal, CKEditor jest projektem open source i został niedawno zaktualizowany o wiele nowych, potężnych funkcji, które będą nadal ulepszane. W ramach inicjatywy gotowości do Drupala 10, współtwórcy Drupala pracują nad wdrożeniem najnowszej i najnowocześniejszej wersji - CKEditor 5 - w Drupal 10.

Teraz, gdy mamy już podstawy, przejdźmy do ulepszeń!

Rozszerzanie CKEditora o te fantastyczne moduły Drupal 9

1. CKEditor Czytaj więcej

Znasz te czasy, kiedy chcesz dać czytelnikowi wybór, aby zobaczyć resztę dużej ilości tekstu? To Twoja wskazówka, aby skorzystać z funkcji Czytaj więcej CKEditor, która zachęca użytkowników do „czytania dalej”, jednocześnie zachowując kompaktowy układ strony. Aby to dodać, Drupal 9 zapewnia prosty i łatwy sposób na włączenie funkcjonalności Czytaj więcej / Pokaż mniej po zainstalowaniu modułu Contributor.

Implementacja modułu:

Po zainstalowaniu tego modułu będziesz musiał skonfigurować kilka ustawień:

1. Edytuj preferowany format tekstu i włącz opcję „Ogranicz dozwolone tagi HTML”.
2. Dodaj <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> w „Dozwolone tagi HTML”. Wyłącz „Ogranicz dozwolone tagi HTML” i naciśnij Zapisz.
3. Teraz przeciągnij i upuść ikonę „Czytaj więcej” z dostępnych przycisków na Aktywny pasek narzędzi (jak pokazano na powyższym obrazku) i naciśnij Zapisz.
4. Po wyczyszczeniu pamięci podręcznej znajdziesz ikonę „ Czytaj więcej ” w edytorze tekstu po wybraniu „Preferowany format tekstu”.

Jak tego użyć:

W obszarze zawartości kliknij ikonę „ Format tekstu ”. Teraz otrzymasz prostokątne pudełko. Dodaj resztę treści, które chcesz wyświetlić, gdy użytkownik kliknie Czytaj więcej.

FAQ : Czy mogę zmodyfikować tekst Czytaj więcej?

Absolutnie! Po prostu kliknij zakładkę „Przycisk Czytaj więcej” w „Ustawieniach wtyczki CKEditor” i zmień tekst.

2. Przycisk koloru CKEditor

Domyślnie CKEditor nie oferuje możliwości zmiany koloru tekstu z poziomu edytora. Ale jeśli chcesz zmienić kolor określonego tekstu lub nawet wyróżnić tekst różnymi kolorami, moduł Drupal 9 CKEditor Color Button powinien znaleźć się na Twojej liście. Należy zauważyć, że ten moduł wymaga również zainstalowania modułu przycisków panelu, a oba te moduły wymagają zainstalowania bibliotek, biblioteki kolorów przycisków i biblioteki przycisków panelu. Po zainstalowaniu modułów i dodaniu bibliotek w folderze bibliotek motywu możemy przenieść przycisk kolorów z dostępnych przycisków na aktywny pasek narzędzi w preferowanym formacie tekstowym.

Często zadawane pytania: czy mogę dodać niestandardowy kolor?

Tak! Jeśli nie chcesz używać żadnego z domyślnych kolorów, które są już dostępne, możesz również ustawić własny kolor. Możesz to zrobić w sekcji „Format edytorów tekstu”, z której aktywowałeś opcje kolorów. Znajdź przycisk „Kolor CKEditor” w sekcji „Ustawienia wtyczek CKEditor” w „Format edytorów tekstu” i dodaj kolor w obszarze tekstowym „Kolory tekstu” oddzielony przecinkami i bez znaku #.

3. CKEditor Youtube

Moduł Drupal 9 CKEditor Youtube umożliwia dodawanie filmów z YouTube do treści bez długiego kodu embed. Po zainstalowaniu i przeniesieniu formularza ikon Youtube z Dostępnych przycisków na Aktywny pasek narzędzi, możesz znaleźć ikony Youtube w edytorze tekstu w preferowanym formacie tekstowym. Ten moduł zależy od biblioteki.

Jedną z najlepszych rzeczy w tym module jest elastyczność. Jak pokazano na powyższym zrzucie ekranu, możesz „Wklej kod do umieszczenia na stronie” lub wkleić adres URL YouTube, określając szerokość i wysokość. Masz również przydatne opcje, takie jak „Autoodtwarzanie”, „Rozpocznij o (określony czas)” i „Pokaż elementy sterujące odtwarzacza”.

4. Szablony CKEditor i interfejs użytkownika szablonów CKEditor

Czy strony internetowe lub posty mają taką samą strukturę treści? Moduły CKEditor Templates i CKEditor Templates User Interface to przepustka do łatwego powielania. Oba moduły zależą od bibliotek, które można pobrać i zainstalować zgodnie z instrukcjami na stronach modułów. Po zainstalowaniu tych bibliotek możesz przenieść ikonę szablonu z dostępnych przycisków na aktywny pasek narzędzi, jak pokazano na poniższym obrazku.

Moduł CKEditor Templates zapewnia wyskakujące okienko dialogowe z predefiniowanymi szablonami. Po kliknięciu ikony szablonu (jak pokazano na powyższym zrzucie ekranu) zobaczysz wyskakujące okienko, w którym wybierzesz dowolny z predefiniowanych szablonów. Szablon zostanie następnie wstawiony z „formatem tekstu i stylami”, które są uwzględnione.

Moduł interfejsu użytkownika szablonów CKEditor służy do tworzenia szablonów wybranych z modułu Szablony CKEditor . Po włączeniu modułu znajdziesz opcję w sekcji Config > Content Authoring > CKEditor Templates .

Kiedy klikniesz na Szablony CKEditor w konfiguracji, zostaniesz przekierowany do strony Szablony konfiguracji CKEditor . Teraz możesz dodawać lub edytować szablony.

5. CKEditor CodeSnippet

Korzystając z modułu CKEditor CodeSnippet, możesz dodać „treść kodu” w treści, tak aby była podświetlona i dobrze sformatowana. Ten moduł wykorzystuje bibliotekę highlight-js i wszystkie dostępne dla niej style. Zainstalowanie tego modułu za pomocą kompozytora spowoduje automatyczne zainstalowanie biblioteki. Po zainstalowaniu tego modułu możesz przenieść ikonę „fragmentu kodu” z przycisku Dostępne na pasek narzędzi Aktywny.

Teraz znajdziesz zakładkę Code Snippet w ustawieniach wtyczki CKEditor formatu tekstowego. Tutaj możesz zaznaczyć/odznaczyć obsługiwane języki programowania.

FAQ: Jak z niego korzystać?

Po zainstalowaniu modułu możesz wstawić funkcję CodeSnippet do treści z CKEditor. Po kliknięciu ikony fragmentu kodu pojawi się wyskakujące okienko. Tutaj możesz wkleić swój kod i wybrać język kodu.

6. CKEditor Wordcount

Pracujesz więc z limitem słów/znaków… Jest to powszechna sytuacja w wysoce stylizowanych witrynach z dynamicznym układem. A te mogą być szczególnie nieuporządkowane, gdy wiele rąk pracuje nad tą samą treścią. W takich przypadkach warto zobaczyć liczbę znaków i słów bezpośrednio w edytorze CKEditor w stopce samego edytora (tak jak w MS Word). Wtedy zainstalowałbyś moduł CKEditor Wordcount. Po zainstalowaniu modułu i biblioteki można znaleźć „liczbę słów i liczbę znaków” w ustawieniach wtyczki CKEditor w formacie tekstowym. Tutaj możesz zaznaczyć/odznaczyć funkcje zgodnie ze swoimi wymaganiami. W prawym dolnym rogu znajdziesz również licznik w CKEditor.

7. Tekst tweetany CKEditor

Próbujesz zdobyć punkty internetowe? Korzystając z modułu CKEditor Tweetable Text, możesz dać swoim użytkownikom opcję tweetowania określonego fragmentu tekstu, klikając słowo lub składnię. Po prostu zainstaluj moduł i bibliotekę zgodnie z instrukcjami na stronie modułu i przenieś ikonę tekstu tweet z przycisku Dostępne na pasek narzędzi Aktywny. W edytorze tekstu znajdziesz ikonę tweeta. Po kliknięciu tej ikony otworzy się wyskakujące okienko. Tutaj możesz dodać tekst wyświetlany (dla którego słowa (słów) chcesz dodać ikonę tweeta) i tekst do tweetowania (tekst, który pojawi się w tweecie ). Gdy użytkownik kliknie opcję Wyświetl tekst , nastąpi przekierowanie do Twittera i zostanie wyświetlony tekst do tweetowania .