- CMS
CKEditor 4 – WYSIWYG-Artikeleditor. Es ermöglicht Ihnen eine flexible Textformatierung, einschließlich der Arbeit mit Stilen, Listen, Links usw. grafische Bilder usw.
SchnittstelleAbbildung 1. Editor-Fenster
Das WYSIWYG-Editorfenster enthält die folgenden Schaltflächenfelder:
 |
Anzeigemodus wechseln |
| Drucken und Auswählen einer Artikelvorlage | |
| Arbeiten mit der Zwischenablage (Ausschneiden, Kopieren, Einfügen, Rückgängig machen) | |
| Suchen und ersetzen | |
| Formulare erstellen | |
| Einfügen von Spoilern (komprimierbarer Text) und Seitenumbrüchen | |
| Ändern des Textstils | |
| Absätze formatieren | |
| Links einfügen | |
| Einfügen von Medieninhalten von Websites Dritter | |
| Objekte einfügen | |
| Auswählen eines Formatierungsstils | |
| Wählen Sie die Absatzformatierung aus | |
| Auswahl der Schriftart | |
| Schriftgröße auswählen | |
| Auswählen von Text- oder Hintergrundfarbe | |
| Rechtschreibprüfung | |
| Zusätzliche Anzeigeoptionen (Blöcke anzeigen und erweitern) |
Der untere Bereich des Editorfensters enthält Informationen zum aktuellen Tag und Textstatistiken:
Anzeigemodus wechseln
Das Bedienfeld zum Umschalten der Editor-Anzeigemodi enthält die folgenden Schaltflächen:
Drucken und Auswählen einer Artikelvorlage
Das Auswahlfeld für Druck- und Artikelvorlagen enthält die folgenden Schaltflächen:
| Drucken des Artikels auf einem Drucker. Nachdem Sie auf diese Schaltfläche geklickt haben, wird ein Standarddialogfeld geöffnet, in dem Sie aufgefordert werden, einen Drucker auszuwählen und den Text des Artikels auszudrucken. | |
Auswählen einer Artikelvorlage:
|
Im Editor stehen folgende Operationen zum Arbeiten mit der Zwischenablage zur Verfügung:
| Schaltfläche „Ausschneiden“. Schneidet den ausgewählten Teil des Artikels aus und legt ihn in der Zwischenablage ab. | |
| Schaltfläche „Kopieren“. Kopiert das ausgewählte Fragment des Artikels und legt es in der Zwischenablage ab. | |
| Schaltfläche „Einfügen“. Fügt den Inhalt der Zwischenablage in den Artikel ein. Wenn Text aus externen Anwendungen wie MS Office eingefügt wird, werden beim Einfügen alle formatierungsbezogenen Tags einbezogen. Die meisten dieser Tags sind unnötig und sollten entfernt werden, was die Bearbeitung des Artikels erschwert. Daher wird empfohlen, diese Schaltfläche nur zum Einfügen unformatierter Texte zu verwenden. | |
| Schaltfläche „Nur Text einfügen“. Ähnlich der Schaltfläche „Einfügen“. Wenn Sie ein Fragment eines Artikels aus der Zwischenablage einfügen, wird dessen Formatierung vollständig entfernt. | |
| Schaltfläche „Aus Word einfügen“. Ähnlich der Schaltfläche „Einfügen“. Wird verwendet, wenn Sie die Formatierung des eingefügten Fragments beibehalten möchten. Durch das Einfügen bleibt das Erscheinungsbild des Textes optimal erhalten und unnötige Formatierungen werden entfernt. Empfohlen zum Kopieren von Text aus MS Word oder anderen MS Office-Anwendungen. | |
| Schaltfläche „Abbrechen“. Wird verwendet, um die zuletzt vorgenommene Änderung rückgängig zu machen. | |
| Schaltfläche „Wiederholen“. Wird verwendet, um die letzte rückgängig gemachte Änderung rückgängig zu machen. |
Das Bedienfeld „Suchen und Ersetzen“ enthält die folgenden Schaltflächen:
Suchen
Wenn Sie auf die Schaltfläche „Suchen“ klicken, öffnet sich ein Suchfenster:
Geben Sie im Feld „Suchen“ das gewünschte Textfragment ein.
Folgende Optionen stehen zur Verfügung:
- Im gesamten Text. Wenn die Option aktiviert ist, wird die Suche am Ende des Artikels von Anfang an fortgesetzt. Wenn die Option deaktiviert ist, wird die Suche beendet, wenn das Ende des Artikels erreicht ist.
Um eine Suche durchzuführen, müssen Sie das gesuchte Fragment eingeben, die erforderlichen Suchoptionen aktivieren und auf die Schaltfläche „Suchen“ klicken. Der Herausgeber führt eine Suche durch und markiert das erste gefundene Fragment im Text des Artikels. Jedes Mal, wenn Sie erneut auf die Schaltfläche „Suchen“ klicken, durchsucht der Editor den Text weiter und markiert das nächste gefundene Fragment.
ErsatzWenn Sie auf die Schaltfläche „Ersetzen“ klicken, öffnet sich ein Fenster zum Ersetzen von Textfragmenten:
Geben Sie im Feld „Suchen“ das gewünschte Textfragment ein. Geben Sie im Feld „Ersetzen durch“ den Text ein, durch den Sie das gesuchte Fragment ersetzen möchten.
Folgende Optionen stehen zur Verfügung:
- Groß- und Kleinschreibung beachten. Wenn die Option aktiviert ist, berücksichtigt die Suche die Groß-/Kleinschreibung der Zeichen des gesuchten Fragments.
- Nur das ganze Wort. Wenn die Option aktiviert ist, sucht der Editor nach dem eingegebenen Fragment als ganzes Wort. Die Suchergebnisse enthalten keine Wörter, zu denen das eingegebene Fragment gehört.
- Im gesamten Text. Wenn die Option aktiviert ist, wird die Suche am Ende des Artikels von Anfang an fortgesetzt. Wenn die Option deaktiviert ist, wird die Suche beendet, wenn das Ende des Artikels erreicht ist.
Um eine Ersetzung durchzuführen, müssen Sie die Felder „Suchen“ und „Ersetzen durch“ ausfüllen, die erforderlichen Suchoptionen aktivieren und auf die Schaltfläche „Ersetzen“ oder „Alle ersetzen“ klicken. Wenn Sie auf die Schaltfläche „Ersetzen“ klicken, sucht und ersetzt der Editor das erste gefundene Fragment im Text des Artikels. Jedes Mal, wenn Sie erneut auf die Schaltfläche „Ersetzen“ klicken, durchsucht der Editor den Text weiter und ersetzt das nächste gefundene Fragment.
Wenn Sie auf die Schaltfläche „Alle ersetzen“ klicken, sucht und ersetzt der Redakteur sofort das erforderliche Fragment im gesamten Text des Artikels.
Formulare dienen dazu, dass der Nutzer Daten in ein Browserfenster eingibt, diese an den Auftragsverarbeiter übermittelt und ggf. die Verarbeitungsergebnisse anzeigt. Zum Beispiel: Benutzerregistrierungsformular, Formular Rückmeldung usw.
Das Formularerstellungsfenster enthält die folgenden Schaltflächen:
| Schaltfläche „Formular“. Wird verwendet, um ein Formular in einen Artikel einzufügen. Im HTML-Code entspricht das Formular dem Formular-Tag. | |
| Schaltfläche „Kontrollkästchen“. Wird verwendet, um Kontrollkästchen (Kontrollkästchen, Häkchen) in ein Formular oder einen Artikel einzufügen. | |
| Radio knopf. Wird zum Einfügen von Optionsfeldern (Schaltern) in ein Formular oder einen Artikel verwendet. | |
| Schaltfläche „Textfeld“. Wird zum Einfügen eines einzeiligen Texteingabefelds verwendet. | |
| Schaltfläche für mehrzeiliges Textfeld. Wird zum Einfügen eines mehrzeiligen Texteingabefelds verwendet. | |
| Schaltfläche „Dropdown-Liste“. Wird zum Einfügen einer Dropdown-Liste verwendet. | |
| Schaltfläche „Knopf“. Wird verwendet, um eine Schaltfläche in ein Formular oder einen Artikel einzufügen. | |
| „Bild-Schaltfläche.“ Wird verwendet, um ein Bild einzufügen, das als Schaltfläche verwendet werden soll. | |
| Schaltfläche „Ausgeblendetes Feld“. Wird verwendet, um ein ausgeblendetes Feld in ein Formular oder einen Artikel einzufügen. |
Wenn Sie auf die Schaltfläche „Formular“ klicken, öffnet sich das Einstellungsfenster für das neue Formular.
Das Formulareinstellungsfenster enthält die folgenden Felder:
| Name | Beliebiger Formularname. Im HTML-Code – der Namensparameter. |
| Aktion | Die URL zu dem Programm oder Dokument, das die in das Formular eingegebenen Daten verarbeitet. Im HTML-Code – der Aktionsparameter. |
| Kennung | Eindeutiger Bezeichner des Formulars. Im HTML-Code – der ID-Parameter. |
| Codierung | Auswählen, wie Formulardaten kodiert werden. Im HTML-Code – der Enctype-Parameter. Verfügbare Werte:
|
| Ziel | Auswahl eines Fensters oder Rahmens, in dem der Formulardatenprozessor Verarbeitungsergebnisse anzeigt. Im HTML-Code – der Zielparameter. Verfügbare Werte:
|
| Methode | Auswahl der zu verwendenden HTTP-Anfragemethode. Im HTML-Code – der Methodenparameter. Verfügbare Werte:
|
Ein Kontrollkästchen dient zur Anzeige von Steuerelementen, die eine Eigenschaft oder Option aktivieren oder deaktivieren. Ein solches Element kann einen von zwei Werten annehmen: ja oder nein. Im HTML-Code entspricht dieses Element dem Tag input type="checkbox". Wenn Sie auf die Schaltfläche „Kontrollkästchen“ klicken, öffnet sich das Einstellungsfenster für das neue Element.
Das Einstellungsfenster für das Element „Checkbox“ enthält folgende Felder:
- Name – beliebiger Name des Elements. Im HTML-Code – der Namensparameter;
- Wert – fungiert als eindeutiger Bezeichner für das Element. Im HTML-Code – der Wertparameter;
- Ausgewählt – wenn die Option aktiviert ist, wird dieses Element standardmäßig markiert.
Das Element „Radio-Button“ dient zur Anzeige einer Gruppe von Werten mit der Möglichkeit, nur einen davon auszuwählen. Diese. Elemente innerhalb einer Gruppe schließen sich gegenseitig aus. Jedes Element kann einen von zwei Werten annehmen: ja oder nein. Im HTML-Code entspricht dieses Element dem Tag input type="radio". Wenn Sie auf die Schaltfläche „Radio Button“ klicken, öffnet sich das Einstellungsfenster für das neue Element.
Das Einstellungsfenster für das Element „Radio Button“ enthält folgende Felder:
- Elemente innerhalb einer Gruppe müssen denselben Namen haben.
- Wert – fungiert als eindeutiger Bezeichner für das Element. Im HTML-Code – der Wertparameter.
- Ausgewählt – wenn die Option aktiviert ist, wird dieses Element standardmäßig markiert. Innerhalb einer Gruppe sollte diese Eigenschaft nur für ein Element aktiviert werden. Wenn es für mehrere Elemente aktiviert ist, wird nur das letzte markiert.
Das Element „Textfeld“ ist für die Eingabe einer Textzeichenfolge durch den Benutzer vorgesehen. Im HTML-Code entspricht dieses Element dem Tag input type="text". Wenn Sie auf die Schaltfläche „Textfeld“ klicken, öffnet sich das Einstellungsfenster für das neue Feld.
- Name – beliebiger Name des Elements. Im HTML-Code – der Namensparameter.
- Wert – Enthält den Text, der im Standardtextfeld angezeigt wird. Im HTML-Code – der Wertparameter.
- Feldbreite (in Zeichen) – die Länge des Textfeld-Eingabebereichs in Zeichen. Im HTML-Code – der Größenparameter.
- Max. Anzahl der Zeichen – die maximale Länge der Zeichenfolge, die in das Textfeld eingegeben werden kann, in Zeichen. Im HTML-Code – der Parameter maxlength.
- Inhaltstyp – Der Inhaltstyp des Textfelds. Im HTML-Code – der Typparameter. Bevor Daten an den Server gesendet werden, werden sie überprüft, um sicherzustellen, dass sie dem angegebenen Typ entsprechen.
Verfügbare Inhaltstypen:
- E-Mail – das Textfeld enthält die E-Mail-Adresse;
- Passwort – das Textfeld enthält das Passwort;
- Suchen – das Textfeld dient zur Eingabe des gesuchten Textes;
- Telefonnummer – das Textfeld enthält eine Telefonnummer;
- Text – das Textfeld enthält eine regelmäßige Zeile;
- Link – Das Textfeld enthält die URL.
Das Element „Mehrzeiliges Textfeld“ ist für die Benutzereingabe von mehrzeiligem Text vorgesehen. Im HTML-Code entspricht dieses Element einem gepaarten Textarea-Tag. Wenn Sie auf die Schaltfläche „Mehrzeiliges Textfeld“ klicken, öffnet sich das Einstellungsfenster für das neue Feld.
Das Einstellungsfenster für das Element „Textfeld“ enthält folgende Felder:
- Name – beliebiger Name des Elements. Im HTML-Code – der Namensparameter.
- Spalten – Feldbreite in Zeichen. Im HTML-Code – der cols-Parameter.
- Zeilen – Feldhöhe in Zeilen. Im HTML-Code – der Zeilenparameter.
- Wert – Enthält den Text, der im Standardtextfeld angezeigt wird.
Das Dropdown-Listenelement dient zur Anzeige einer Multiple-Choice-Liste oder Dropdown-Liste. Im HTML-Code entspricht dieses Element einem gepaarten Select-Tag. Listenelemente werden mit einem gepaarten Options-Tag abgeglichen. Wenn Sie auf die Schaltfläche „Dropdown-Liste“ klicken, öffnet sich das Einstellungsfenster für die neue Liste.
Das Einstellungsfenster für die Mehrfachauswahlliste enthält die folgenden Felder:
- Name – beliebiger Name des Elements. Im HTML-Code – der Namensparameter.
- Wert – enthält den Wert des standardmäßig ausgewählten Listenelements. Im HTML-Code für dieses Element ist das Options-Tag auf selected="selected" gesetzt.
- Größe – die Höhe des angezeigten Listenbereichs in Zeilen. Wenn die Größe gleich eins ist, wird eine Dropdown-Liste angezeigt. Wenn die Größe nicht angegeben ist, hängt die Listenansicht von der Option „Mehrfachauswahl zulassen“ ab.
Parametergruppe „Verfügbare Optionen“:
- Text – Eingabefeld für den angezeigten Text des Listenelements. Wird in Verbindung mit dem Feld „Wert“ eingegeben. Um ein „Text – Wert“-Paar zur Liste hinzuzufügen, klicken Sie auf die Schaltfläche „Hinzufügen“.
- Wert – Eingabefeld für den Wert des an den Server gesendeten Listenelements. Wird in Verbindung mit dem Feld „Text“ eingegeben. Um ein „Text – Wert“-Paar zur Liste hinzuzufügen, klicken Sie auf die Schaltfläche „Hinzufügen“.
- Schaltfläche „Hinzufügen“, um das eingegebene „Text – Wert“-Paar zur Liste hinzuzufügen.
- Bearbeiten – Schaltfläche zum Ändern des ausgewählten Listenelements. Zum Ändern müssen Sie das gewünschte Element in den Listeneinstellungen auswählen, den Inhalt der Felder „Text“ und „Wert“ bearbeiten und auf die Schaltfläche „Ändern“ klicken. Das ausgewählte Element wird entsprechend aktualisiert.
- Erhöhen – Schaltfläche, um das ausgewählte Listenelement eine Ebene höher zu verschieben.
- Nach unten – Schaltfläche zum Verschieben des ausgewählten Listenelements um eine Ebene nach unten.
- Als ausgewählt markieren – Wenn Sie auf die Schaltfläche klicken, wird das ausgewählte Listenelement standardmäßig als ausgewählt markiert. Der Wert des Elements wird im Feld „Wert“ angezeigt (siehe oben). Im HTML-Code für dieses Element ist das Options-Tag auf selected="selected" gesetzt.
- Löschen – Schaltfläche zum Löschen des ausgewählten Elements aus der Liste.
- Mehrfachauswahl zulassen – Wenn die Eigenschaft aktiviert ist, können Sie mit der Strg-Taste mehrere Listenelemente auswählen. Wenn die Listengröße nicht angegeben ist und die Eigenschaft deaktiviert ist, wird eine Dropdown-Liste angezeigt. Wenn die Listengröße nicht angegeben ist und die Eigenschaft aktiviert ist, wird die Listengröße auf vier festgelegt.
Das Ende des Artikels folgt...
InhaltsverzeichnisBeim Erstellen eines Editors auf Ihrer Seite ist es möglich, Konfigurationen einzurichten, die viele seiner Aspekte ändern. Zum Beispiel:
ClassicEditor .create(document .querySelector("#editor"), ( Symbolleiste : [ "heading" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ] , Überschrift: ( Optionen: [ ( Modell: „Absatz“, Titel: „Absatz“, Klasse: „ck-heading_paragraph“), ( Modell: „heading1“, Ansicht: „h1“, Titel: „Überschrift 1“, Klasse : "ck-heading_heading1" ), ( Modell: "heading2", Ansicht: "h2", Titel: "Heading 2", Klasse: "ck-heading_heading2" ) ] ) )) .catch(error =>
Wie Sie sehen, werden Konfigurationen durch ein einfaches JavaScript-Objekt festgelegt, das an die Methode create() übergeben wird.
Funktionen entfernenBei Builds sind alle im Distributionspaket enthaltenen Funktionen standardmäßig aktiviert. Sie sind als Plugins für CKEditor definiert.
In einigen Fällen müssen Sie in Ihrer Anwendung möglicherweise unterschiedliche Editor-Setups verwenden, die alle auf demselben Build basieren. Zu diesem Zweck, du brauchst um die im Editor zur Laufzeit verfügbaren Plugins zu steuern.
Im folgenden Beispiel werden Überschriften- und Link-Plugins entfernt:
// Einige Plugins aus dem Standard-Setup entfernen. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], Toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));Seien Sie vorsichtig, wenn Sie Plugins aus CKEditor-Builds mit config.removePlugins entfernen. Wenn entfernte Plugins Symbolleistenschaltflächen bereitstellten, wird die in einem Build enthaltene Standardkonfiguration der Symbolleiste ungültig. In einem solchen Fall müssen Sie die aktualisierte Symbolleistenkonfiguration wie im obigen Beispiel bereitstellen.
Liste der PluginsFür jeden Build stehen eine Reihe von Plugins zur Verfügung. Sie können ganz einfach alle in Ihrem Build verfügbaren Plugins auflisten:
ClassicEditor.builtinPlugins.map(plugin =>plugin.pluginName);
Hinzufügen von Features Hinzufügen komplexer FeaturesDa CKEditor-Builds nicht alle möglichen Funktionen enthalten, besteht die einzige Möglichkeit, ihnen weitere Funktionen hinzuzufügen, darin, einen benutzerdefinierten Build zu erstellen.
Hinzufügen einfacher (eigenständiger) FunktionenZu jeder Regel gibt es eine Ausnahme. Obwohl es unmöglich ist, Plugins hinzuzufügen, die Abhängigkeiten zu @ckeditor/ckeditor5-core oder @ckeditor/ckeditor5-engine (die fast alle vorhandenen offiziellen Plugins enthalten) haben, ohne den Build neu zu erstellen, ist es dennoch möglich, einfache, abhängigkeitsfreie Plugins hinzuzufügen .
ClassicEditor aus „@ckeditor/ckeditor5-build-classic“ importieren; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Den benutzerdefinierten Upload-Adapter als Plugin des Editors laden. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Symbolleisten-SetupIn Builds, die Symbolleisten enthalten, ist eine optimale Standardkonfiguration dafür definiert. Möglicherweise benötigen Sie jedoch eine andere Anordnung der Symbolleisten. Dies kann durch Konfiguration erreicht werden.
Jeder Editor verfügt möglicherweise über ein anderes Konfigurationsschema für die Symbolleiste. Es wird daher empfohlen, die entsprechende Dokumentation zu lesen. In jedem Fall kann Ihnen das folgende Beispiel einen Überblick geben:
ClassicEditor .create(document .querySelector("#editor" ), ( Symbolleiste : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));
Das Obige ist eine strenge UI-bezogene Konfiguration. Durch das Entfernen eines Symbolleistenelements wird die Funktion nicht aus den Editor-Interna entfernt. Wenn Ihr Ziel bei der Konfiguration der Symbolleiste darin besteht, Funktionen zu entfernen, besteht die richtige Lösung darin, auch die entsprechenden Plugins zu entfernen. Weitere Informationen finden Sie oben.
Verfügbare Artikel auflistenMit dem folgenden Snippet können Sie alle in Ihrem Editor verfügbaren Symbolleistenelemente abrufen:
Array .from(editor.ui.componentFactory.names());In Drupal 7 gibt es wie in der sechsten Version keine integrierte Funktion Visueller Editor.
Benutzerhandbuch: Installation und Konfiguration des ckeditor-Editors in Drupal 7. Laden von Bildern aus Elfinder.In Drupal 7 müssen wir wie in der sechsten Version einen Editor installieren. Natürlich müssen Sie dies nicht tun und Texte schreiben, indem Sie nur den Code sehen. Aber ich mag visuelle Editoren. Ich möchte Sie daran erinnern, dass wir in Lektion 2 die Installation und Konfiguration für Drupal 6 studiert haben:
Heute schauen wir uns die funktionierende Kombination von CMS und Editor an.
Drupal 7.17
CKEditor – WYSIWYG-HTML-Editor 7.x-1.11
CKEditor 4.0
elFinder Dateimanager 7.x-0,7
Skript
elFinder - elfinder-1.2
Für Drupal Version 7 ist der gesamte Installations- und Konfigurationsprozess viel einfacher. Sie müssen nichts in den Dateien bearbeiten, alle Aktionen sind über das Admin-Panel verfügbar (wir aktivieren nur die Kontrollkästchen). Bestehende aktuelle Versionen Module machen unser Leben viel einfacher.
So installieren Sie den WYSIWYG-Editor CKEditor auf die neueste Version CMS Drupal 7.17CKEditor ist ein flexibler und benutzerfreundlicher Editor. Die Benutzeroberfläche ähnelt Word.
Zuerst installieren wir das Editor-Skript, dann das Modul selbst. Es ist das Modul, das es mit der Site verbindet.
Notiz.
Ich gebe zum Zeitpunkt des Schreibens bestimmte Versionen an.
1. Laden Sie das Modul herunter ]]> https://drupal.org/project/ckeditor ]]>
Entpacken Sie das Archiv in einen Ordner site/all/modules. Der ganze Weg sieht so aus: site/all/modules/ckeditor
2. Laden Sie den Editor herunter CKEditor 4.0]]> https://ckeditor.com/download ]]>
Für Editordateien müssen Sie einen Bibliotheksordner erstellen Website/Alle/
Der Pfad zum Entpacken des Archivs sieht folgendermaßen aus: site/all/libraries/ckeditor
Auf der Modulseite aktivieren wir es und konfigurieren es dann.
Gehen Sie zu „Konfiguration – CKEditor – CKEditor Global Profile – Bearbeiten“. Hier müssen Sie den Eintrag im Feld „Pfad zum CKEditor“ überprüfen – das sollte so sein %l/ckeditor. Dieser Eintrag zeigt an, dass sich der Editor im Ordner befindet Bibliotheken.
Alle. Sie haben CKEditor installiert und es sollte funktionieren. Um dies zu überprüfen, öffnen Sie die Seite zum Erstellen eines neuen Materials. Anstelle eines großen Eingabefelds sehen Sie nun den üblichen visuellen Editor.
Wenn der Editor nicht sichtbar ist:
Überprüfen Sie, ob die ausgewählten Modulversionen für Ihre Drupal-Version korrekt sind. Versuchen Sie, zu einer anderen Version zu wechseln.
1 Schritt. Einrichten des Advanced-Profils im CKEditor-Editor.
Erweitert (erweitert, mit Laden von Bildern usw.)
Gehen Sie zu „Verwaltung > Konfiguration > ckeditor – admin/config/content/ckeditor“.
Lassen Sie uns das erweiterte Profil einrichten. Klicken Sie auf den Link „Ändern“ neben dem erweiterten Profil.
Erscheinungsbild des Herausgebers:
Wähle eine Farbe.
Ziehen Sie die erforderlichen Schaltflächen.
Wählen Sie die Sprache Russisch aus.
Dateibrowser-Einstellungen
Wir wählen einen Dateimanager nach unserem Geschmack; unten im Text finden Sie die Installation und Konfiguration eines Dateimanagers für Drupal 7 – Elfinder.
Schritt 2. Einrichten des vollständigen Profils im ckeditor-Editor
Gehen Sie zu „Verwaltung – Konfiguration – ckeditor“ – admin/config/content/ckeditor
Sie können die Einstellungen als Standard belassen und Russisch auswählen.
Am einfachsten ist es, Full (vollständig) und Advanced (erweitert) zu verwenden – bei registrierten Versionen auch Ihre Varianten. Erstellen Sie ein einfaches Profil für anonyme Benutzer, in dem die automatische Änderung markiert wird HTML-Text in einem einfachen Format.
Ein kleiner Auszug aus der Rezension von Drupal 7, so eine kleine positive Rezension.
Standardmäßig verfügt die Sieben über ein Feld zum Hochladen von Bildern. Sehr nützliche Funktion. Jedem Material kann ein Bild – eine Art Logo – zugeordnet werden. In der Ankündigung wird dieses Bild automatisch verkleinert.
Überprüfen Sie dazu unter https://ckeditor.com/download, welche Version Sie heruntergeladen haben
- Im Basispaket gibt es nur wenige Schaltflächen.
- Standardpaket – es gibt noch mehr davon.
- Das komplette Set ist im Komplettpaket enthalten – laden Sie es herunter, wenn Sie das Beste daraus machen möchten.
Eine Kombination aus Editor und Dateimanager macht Ihre Arbeit angenehmer. Sie können ein Bild überall vom Server oder von Ihrem Computer einfügen. Weisen Sie ihm die notwendigen Attribute und eine alternative Beschreibung zu. Leider muss es auch installiert werden.
Der Dateimanager CKEditor lädt nicht nur Bilder, sondern auch andere Dateien herunter.
Wie beim Editor müssen Sie das Modul und das Skript herunterladen.
Entpacken Sie das Archiv und legen Sie die Dateien im Ordner site/all/modules/elfinder ab
Aus letzte Version ergab sich elfinder-1.2.
Entpacken Sie dann das Archiv und legen Sie die Dateien im Ordner site/all/libraries/elfinder ab
Hier gibt es eine kleine Funktion, der Ordner sollte elfinder heißen.
Im „Root-Verzeichnis“ belassen wir die Auswahl für „Systemstandards verwenden“ – die Standardeinstellung in Drupal.
Standardeinstellungen admin/config/media/file-system:
Auf der Seite „Inhalt“ – Admin/Inhalt – sehen Sie neue Registerkarte„Dateien“. Klicken Sie nun einfach darauf und Sie sehen die Dateimanageroberfläche.
Und der letzte Schritt besteht darin, den Editor mit zu kombinieren Dateimanager zu einem funktionalen Werkzeug.
Das Einrichten von Editor-Profilen habe ich oben bereits beschrieben.
Ich wiederhole:
Wählen Sie in aus Dateibrowsertyp – elFinder. Auf Wunsch können Sie hier auch den Ordner zum Herunterladen von Dateien ändern.
Jetzt sollte alles funktionieren, aber ich verstehe einfach nicht, warum das nicht im Drupal-Kern ist? Stattdessen gibt es mehrere Editor-Optionen für jeden Geschmack. Was zu gut ist. ;)
Neue Arbeitsverbindung
Drupal 7.21
CKEditor – WYSIWYG-HTML-Editor 7.x 1.13
CKEditor – ckeditor_4.1_standard
elFinder-Dateimanager 7.x-0.8
elFinder-Skript – elfinder-1.2
Es wurde festgestellt, dass der Fehler beim Einfügen eines Drupal-Teasers auftritt. Wenn der Artikel die Ankündigung nicht trennt, liegt kein Fehler vor.
Der Grund dafür ist, dass die Ankündigungsgröße standardmäßig bereits im Materialtyp konfiguriert ist. Dadurch ergibt sich eine Doppelnutzung der Ansagetrennung: manuell und automatisch.
Pfad zur Einrichtung der Werbeanzeige:
Startseite » Verwaltung » Struktur » Inhaltstypen » Artikel » Anzeige verwalten
Beratung. Sollte beim Einrichten sein Aussehen Entfernen Sie im visuellen Editor den Teaser-Drupal-Button in beiden Profilen.
Artikel zum Erlernen von Drupal:
Allgemeine Konzepte für Anfänger.
So russifizieren Sie Drupal und seine Module.
Eine Auswahl an Blog-Modulen.
Kurzanleitung.
Normalerweise ist ein WYSIWYG-Editor erforderlich, wenn ein Admin-Panel geschrieben werden muss, in dem ein normaler Benutzer, der kein HTML kennt, einfach und bequem eigene Texte hinzufügen kann. Dies war in meinem Fall der Fall.
Laden Sie CKEditor von der offiziellen Website herunter: Laden Sie ckeditor herunter
Laden Sie den kostenlosen Dateimanager KCFinder herunter: Laden Sie kcfinder herunter
Wir integrieren CKEditor standardmäßig in die Website. Fügen Sie der Seite das Skript „ckeditor.js“ hinzu (in meinem Fall befindet sich das Skript im Stammverzeichnis der Website im Verzeichnis „ckeditor“). Der Einfachheit halber habe ich KCFinder in den ckeditor-Ordner entpackt.
Lassen Sie es ein Textfeld auf der Seite geben, das durch einen WYSIWYG-Editor ersetzt werden muss:
CKEDITOR.replace("ckeditor");
Als nächstes müssen wir die Einstellungen in ckeditor festlegen, sodass KCFinder geöffnet wird, wenn Sie auf die Schaltfläche „Datei hochladen“ klicken oder Dateien auf dem Server anzeigen. Dazu fügen wir die folgenden Einstellungen zu CKEDITOR.replace hinzu:
CKEDITOR.replace("ckeditor",("filebrowserBrowseUrl":/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":/ckeditor/kcfinder/browse.php?type=images, "filebrowserFlashBrowseUrl" :“/ckeditor/kcfinder/browse.php?type=flash“, „filebrowserUploadUrl“:/ckeditor/kcfinder/upload.php?type=files“, „filebrowserImageUploadUrl“: „/ckeditor/kcfinder/upload.php?type =images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"));
Im Verzeichnis /ckeditor/kcfinder/ befindet sich ein Skript mit der Konfiguration config.php, in dem Sie den Pfad zu dem Ordner angeben müssen, in den die hinzugefügten Dateien geladen werden (vergessen Sie nicht sicherzustellen, dass das Verzeichnis beschreibbar ist). .
Es scheint, dass alles funktioniert, aber es gibt noch ein paar weitere Punkte bezüglich der Codeformatierungseinstellungen in CKEditor, zum Beispiel gefällt mir nicht, dass der Text in ein Tag eingeschlossen wird, wenn man im Editor die Eingabetaste drückt
Dieses Tag wird auch ständig geschrieben, wenn wir versuchen, ein leeres Feld mit angeschlossenem Editor zu speichern. Um dies zu beheben, fügen Sie ein kleines Skript hinzu:
If(typeof CKEDITOR !== "undefiniert") ( CKEDITOR.on("instanceReady", function(ev) ( // Absätze ausgeben als . ev.editor.dataProcessor.writer.setRules("*", ( indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true ));
Autovervollständigungs-Tag entfernt
Jetzt entfernen wir die Einfassung des Textes in diesem Tag, wenn wir die Eingabetaste drücken. Fügen Sie dazu die folgenden Einstellungen zur Konfigurationsdatei hinzu /ckeditor/config.js:
// beim Drücken der Eingabetaste br hinzufügen config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Wenn die letzten beiden Codezeilen nicht zur Lösung des Problems beitragen, leeren Sie den Cache Ihres Browsers und testen Sie es erneut. Alles sollte funktionieren. Somit ist Ihr CKEditor-Editor mit dem KCFinder-Dateimanager betriebsbereit und sieht nicht einmal schlecht aus.
Weitere Informationen zum Einrichten der Konfiguration finden Sie auf den offiziellen Webseiten der Redaktion.
