Machen Sie Ihr Drupal 9 CKEditor Pop - 7 nützliche Module, von denen Sie nicht wussten, dass sie existieren

Der Content Editor ist im Grunde die wichtigste Funktion eines CMS. Und mit einem Kraftpaket wie CKEditor als Standard-Rich-Text-Bearbeitungstool hat Drupal sein Content-Management-Spiel mit mehreren neuen Funktionen für Drupal 8/9 wie dem CKEditor-Widget-System und dem Advanced Content Filter (ACF) erheblich verbessert. Also, ja, es ist sogar mit den Standardfunktionen ziemlich mächtig... Aber Sie können Ihr CKEditor-Spiel mit Hilfe einiger beigesteuerter Module und Plug-Ins wirklich verbessern. Lesen Sie weiter, um unsere Meinung zu den besten und interessantesten Add-ons zu erhalten, um die Funktionen und die Benutzerfreundlichkeit von CKEditor zu erweitern.

Der Drupal 9 CKEditor

Erstens ist CKEditor 4.5 für Drupal-Neulinge der standardmäßige WYSIWYG-Editor (What you see is what you get) in Drupal 8/9. Es ist ein Texteditor, der Website-Administratoren hilft, Inhalte direkt auf Webseiten zu schreiben und zu bearbeiten. Wie Drupal ist CKEditor ein Open-Source-Projekt und wurde kürzlich mit vielen leistungsstarken neuen Funktionen aktualisiert, die weiter verbessert werden. Als Teil der Drupal 10-Readiness-Initiative arbeiten Drupal-Mitwirkende daran, die neueste und modernste Version - CKEditor 5 - in Drupal 10 zu implementieren.

Nachdem wir nun die Grundlagen erledigt haben, kommen wir zu den Upgrades!

Erweitern von CKEditor mit diesen fantastischen Drupal 9-Modulen

1. CKEditor Weiterlesen

Kennen Sie die Zeiten, in denen Sie dem Leser die Wahl lassen möchten, den Rest einer großen Textmenge zu sehen? Das ist Ihr Stichwort, um die Read More-Funktion von CKEditor zu verwenden, die Ihre Benutzer zum „Weiterlesen“ einlädt und gleichzeitig Ihrer Seite ein kompaktes Layout verleiht. Um es hinzuzufügen, bietet Drupal 9 eine einfache und einfache Möglichkeit, die Read More / Show Less-Funktionalität zu aktivieren, sobald Sie das Beitragsmodul installiert haben.

Implementieren des Moduls:

Nach der Installation dieses Moduls müssen Sie einige Einstellungen vornehmen:

1. Bearbeiten Sie das bevorzugte Textformat und aktivieren Sie "Zulässige HTML-Tags einschränken".
2. Fügen Sie <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> in "Erlaubte HTML-Tags" hinzu. Deaktivieren Sie die Option "Zulässige HTML-Tags begrenzen" und klicken Sie auf Speichern.
3. Ziehen Sie nun das Symbol "Weiterlesen" per Drag & Drop von den verfügbaren Schaltflächen in die aktive Symbolleiste (wie in der Abbildung oben gezeigt) und klicken Sie auf Speichern.
4. Nachdem Sie den Cache geleert haben, finden Sie im Texteditor das Symbol „ Weiterlesen “, wenn Sie das „Bevorzugte Textformat“ auswählen.

So verwenden Sie es:

Klicken Sie im Inhaltsbereich auf das Symbol „ Textformat “. Jetzt erhalten Sie eine rechteckige Schachtel. Fügen Sie den Rest des Inhalts hinzu, den Sie anzeigen möchten, nachdem Ihr Benutzer auf Weiterlesen geklickt hat.

FAQ: Kann ich den Read More-Text ändern?

Absolut! Klicken Sie einfach in den „CKEditor-Plugin-Einstellungen“ auf die Registerkarte „Weiterlesen“ und ändern Sie den Text.

2. CKEditor-Farbtaste

Standardmäßig bietet Ihnen CKEditor keine Möglichkeit, die Textfarbe im Editor zu ändern. Wenn Sie jedoch die Farbe eines bestimmten Textes ändern oder den Text mit anderen Farben hervorheben möchten, sollte das Drupal 9 CKEditor Color Button-Modul auf Ihrer Liste stehen. Beachten Sie, dass für dieses Modul auch das Panel-Tastenmodul installiert werden muss und für beide Module müssen die Bibliotheken, die Color Button Library und die Panel Button Library installiert sein. Nach der Installation der Module und dem Hinzufügen von Bibliotheken im Bibliotheksordner des Themas können wir die Schaltfläche Farben von Verfügbare Schaltflächen in die Aktive Symbolleiste im bevorzugten Textformat verschieben.

FAQ: Kann ich eine benutzerdefinierte Farbe hinzufügen?

Ja! Wenn Sie keine der bereits verfügbaren Standardfarben verwenden möchten, können Sie auch eine benutzerdefinierte Farbe festlegen. Sie können dies im Abschnitt „Texteditorformat“ tun, in dem Sie die Farboptionen aktiviert haben. Suchen Sie die „CKEditor Color-Schaltfläche“ im Abschnitt „CKEditor-Plugins-Einstellung“ von „Texteditorformat“ und fügen Sie Farbe im Textbereich „Textfarben“ durch Kommas getrennt und ohne #-Zeichen hinzu.

3. CKEditor Youtube

Das Youtube-Modul von Drupal 9 CKEditor hilft Ihnen, Youtube-Videos ohne langen Einbettungscode zu Ihren Inhalten hinzuzufügen. Nach der Installation und dem Verschieben des Youtube-Symbolformulars von Verfügbare Schaltflächen in die aktive Symbolleiste finden Sie Youtube-Symbole im Texteditor im bevorzugten Textformat. Dieses Modul hängt von der Bibliothek ab.

Eines der besten Dinge an diesem Modul ist die Flexibilität. Wie im obigen Screenshot gezeigt, können Sie „Einbettungscode einfügen“ oder eine Youtube-URL einfügen, während Sie Breite und Höhe angeben. Außerdem haben Sie praktische Optionen wie "Autoplay", "Start um (bestimmte Zeit)" und "Player-Steuerelemente anzeigen".

4. CKEditor-Vorlagen und CKEditor-Vorlagen-Benutzeroberfläche

Haben Sie viele der gleichen Inhaltsstrukturen für Ihre Website-Seiten oder Beiträge? Die Module CKEditor Templates und CKEditor Templates User Interface sind Ihr Ticket für eine einfache Duplizierung. Beide Module sind auf Bibliotheken angewiesen, die wie auf den Modulseiten beschrieben heruntergeladen und installiert werden können. Nach der Installation dieser Bibliotheken können Sie das Vorlagensymbol von Verfügbare Schaltflächen in die Aktive Symbolleiste verschieben, wie in der folgenden Abbildung gezeigt.

Das Modul CKEditor Templates bietet ein Dialogfenster mit vordefinierten Templates. Wenn Sie auf das Vorlagensymbol klicken (wie im obigen Screenshot gezeigt), wird ein Popup geöffnet, in dem Sie eine Ihrer vordefinierten Vorlagen auswählen können. Die Vorlage wird dann mit den enthaltenen "Textformaten und -stilen" eingefügt.

Das Modul CKEditor Templates User Interface ist das, was Sie verwenden, um die Vorlagen zu erstellen, die Sie im Modul CKEditor Templates auswählen. Nach der Aktivierung des Moduls finden Sie eine Option im Abschnitt Config > Content Authoring > CKEditor Templates .

Wenn Sie in der Konfiguration auf CKEditor-Vorlagen klicken, werden Sie zur Seite mit den CKEditor-Konfigurationsvorlagen weitergeleitet . Jetzt können Sie Vorlagen hinzufügen oder bearbeiten.

5. CKEditor CodeSnippet

Mit dem CKEditor CodeSnippet-Modul können Sie Ihren "Codeinhalt" in den Inhalt einfügen, damit er hervorgehoben und gut formatiert wird. Dieses Modul verwendet die Highlight-js- Bibliothek und alle verfügbaren Stile dafür. Wenn Sie dieses Modul mit Composer installieren, wird die Bibliothek automatisch installiert. Nach der Installation dieses Moduls können Sie das Symbol „Code-Snippet“ von der Schaltfläche Verfügbar in die aktive Symbolleiste verschieben.

Jetzt finden Sie in den CKEditor-Plugin-Einstellungen des Textformats die Registerkarte Code-Snippet . Hier können Sie unterstützte Programmiersprachen aktivieren/deaktivieren.

FAQ: Wie benutzt man es?

Sobald Sie das Modul installiert haben, können Sie die CodeSnippet-Funktion in Ihren Inhalt von CKEditor einfügen. Wenn Sie auf das Code-Snippet-Symbol klicken, erhalten Sie ein Popup. Hier können Sie Ihren Code einfügen und die Codesprache auswählen.

6. CKEditor Wortzahl

Sie arbeiten also mit einer Beschränkung von Wörtern/Zeichen… Dies ist eine häufige Situation bei stark stilisierten Websites mit dynamischen Layouts. Und diese können besonders chaotisch werden, wenn mehrere Hände an demselben Inhalt arbeiten. In diesen Fällen ist es hilfreich, die Anzahl der Zeichen und Wörter direkt in Ihrem CKEditor in der Fußzeile des Editors selbst anzuzeigen (genau wie Sie es in MS Word tun würden). Dann installieren Sie das CKEditor Wordcount-Modul. Nach der Installation des Moduls und der Bibliothek finden Sie „Wortzahl und Zeichenzahl“ in den CKEditor-Plugin-Einstellungen des Textformats. Hier können Sie Funktionen entsprechend Ihrer Anforderung aktivieren/deaktivieren. Im CKEditor finden Sie auch unten rechts einen Zähler.

7. Tweetfähiger CKEditor-Text

Versuchen Sie, einige Internetpunkte zu sammeln? Mit dem Tweetable Text-Modul von CKEditor können Sie Ihren Benutzern die Möglichkeit geben, einen bestimmten Text zu twittern, indem Sie auf ein Wort oder eine Syntax klicken. Installieren Sie einfach das Modul und die Bibliothek wie auf der Modulseite beschrieben und verschieben Sie das tweetbare Textsymbol von der Schaltfläche Verfügbar in die Aktive Symbolleiste. Im Texteditor finden Sie dann ein Tweet-Symbol. Wenn Sie auf dieses Symbol klicken, öffnet sich ein Popup. Hier können Sie einen Anzeigetext (für welche Wörter Sie das Tweet-Symbol hinzufügen möchten) und einen Tweetable Text (den Text, der im Tweet angezeigt wird ) hinzufügen . Wenn ein Benutzer klickt auf Text anzeigen , dann wird es auf Twitter und Tweetable Text Umleitung wird angezeigt.