rozrzucone klawisze
CKEditor w Drupal 8 Konfiguracja i dodawanie nowych opcji cz. I

Czym jest CKEditor?

Jest to jeden z wielu wizualnych edytorów HTML.
Umożliwia proste wprowadzanie tekstu przy pomocy interfejsu, który przypomina taki edytor jak na przykład OpenOffice. 

Ułatwia formatowanie tekstu przy pomocy zestawu przycisków, które służą, między innymi do takich rzeczy jak:

  • zmiana czcionki,
  • wielkość tekstu,
  • wstawienie obrazka,
  • tworzenie listy,
  • i wiele innych.

W systemie Drupal 8 CKEditor jest domyślnym edytorem tekstu.
Aby z niego korzystać, nie trzeba dodatkowo doinstalowywać żadnych bibliotek czy modułów.

 

Grafika przedstawia włączony ckedytor w formularzu dodawania treści
Włączony edytor w formularzu dodawania treści

Domyślnie edytor jest włączony dla dwóch formatów wprowadzanego tekstu:

  • podstawowy HTML,
  • pełny HTML.

Różnią się one ilością włączonych opcji formatowania tekstu. Zaobserwujesz to, gdy podczas dodawania treści zmienisz format.

Opcje formatowania tekstu oraz widoczność edytora w zależności od wybranego filtra czy też roli użytkownika, są w pełni konfigurowalne.

Ustawienia edytora znajdują się na stronie

Configuration → Content Authoring → Text formats and editors

 

Ścieżka dostępu do ustawień edytora

 

Domyślnie, każdy zalogowany użytkownik może korzystać z CKEditora włączając filtr „Podstawowy HTML”

Filtr „Pełny HTML” zarezerwowany jest jedynie dla użytkowników z rolą administratora strony.

Przy każdym filtrze z włączonym edytorem masz możliwość konfiguracji opcji narzędzia.

Poniżej opcje dla „Podstawowy HTML”

 

Podstawowe role edytora HTML

 

Widać tu opcję wyboru „Text editor”, która włącza lub wyłącza rozbudowany edytor dla tego formatu tekstu.

W sekcji „Roles” określono role użytkowników, którzy mogą korzystać z tego formatu.

Sekcja „TOOLBAR CONFIGURATION” odpowiada za włączanie i wyłączanie opcji w CKEditor.

„Available buttons” określają, jakie przyciski są dostępne do wykorzystania w CKEditorze (oprócz tych już dodanych).

„Active toolbar” to sekcja z włączonymi przyciskami.

W prosty sposób metodą drag-and-drop, możesz włączyć dodatkowe opcje. Po prostu przenieś przycisk z sekcji „Available buttons” do „Active toolbar”. Teraz wystarczy zapisać ustawienia.

 

Obsługa edytora

Dodaj nowy artykuł na stronę.
Content -> Add Content -> Article

W polu tekstowym powinien być widoczny edytor tekstu dla formatu danych “Podstawowy HTML” (Basic HTML)

 

Edytor tekstowy widoczny w polu tekstowym

 

Jeśli zmienisz format tekstu na “Full HTML” to prawdopodobnie zobaczysz więcej opcji edytora.

Obok takich standardowych opcji jak pogrubienie czy kursywa tekstu masz możliwość wstawienia obrazka, poprzez wrzucenie go na serwer strony.

 

Zaznaczona ikona dodawania obrazu oraz okno dialogowe umożliwiające dodanie i sformatowanie zdjęcia

 

Poniżej znajduje się przykładowa treść z tekstem, linkiem oraz obrazkiem.
W edytorze widzimy od razu jak to będzie wyglądało po zapisaniu treści. (Stąd nazwa takich edytorów - WYSIWYG - What You See Is What You Get)

 

Przykładowe zdjęcie ze srebrnym, sportowym autem w nieokreślonej, szarawej przestrzeni ilustrujące efekt dodania grafiki do testu poprzez edytor

 

Każdy przycisk generuje kod HTML, który po zapisaniu treści jest wstawiony na stronę.

Powyższy przykład wygenerował coś takiego:

 

<p><em><strong>This is a sample text. </strong></em><a href="https://drupal.org">With link.&nbsp;</a></p>

<p>And image</p>
<img alt="img" data-align="center" data-entity-type="file" data-entity-uuid="bae745ac-f47d-4426-84cd-9d319f8403f1" src="/sites/default/files/inline-images/DBten-web-news.jpg" />
<p>&nbsp;</p>

 

Własne pole tekstowe z CKEditor.

W Drupalu możesz łatwo tworzyć nowe rodzaje zawartości i dodawać do nich pola.

Na przykładzie istniejącego już rodzaju zawartości, jakim jest Artykuł, pokaże jak dodać pole aby z automatu obsługiwało rozbudowany edytor tekstu.

Strona Structure -> Content Types

 

Ścieżka Home->Administration->Structure. Strzałka wskazuje przycisk Manage Fields

 

Po kliknięciu w “Manage fields”, przy wybranym rodzaju zawartości możesz dodać własne pola.

 

Ramka zaznacza przyciski Add field umożliwiający dodanie własnych modułów

 

Jako typ pola wybierz Text (formatted, long)

Dodaje on wielowierszowe pole tekstowe.

 

Dodawanie pola oraz opisującej go etykiety

 

Po zapisaniu wszystkich opcji zauważysz, że edytor jest włączony automatycznie dla tego pola.

Komunikat o zaktualizowaniu preferencji dla pola tekstowego. Domyślnie nowe ustawienia są włączone

 

I to tyle, wystarczy zapisać pole, by móc z niego korzystać.

 

Rozszerzanie możliwości CKEditora w Drupal 8

Istnieje sporo modułów, które wprowadzają nowe funkcjonalności do CKEditora.

Poniżej opisane jest kilka z nich, a tutaj cała lista modułów rozszerzających CKEditor.

Editor Advanced link

Rozbudowane okno dialogowe do tworzenia linków. 
Umożliwia definiowanie takich atrybutów jak:

  • tytuł
  • klasa
  • id
  • target
  • rel

Editor File upload

Umożliwia bezpośredni upload plików oraz linkowanie do nich w tekście.

Linkit

Dostarcza prosty interfejs do tworzenia linków wewnętrznych i zewnętrznych. Linkować wewnętrznie można np. poprzez pole autocomplete, które wyszukuje linki na podstawie tytułów treści dodanych w systemie.

Porozmawiajmy o Twoich projektach

Napisz do nas!