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: download ckeditor
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 Site 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.

CKEditor ist ein gebrauchsfertiger HTML-Texteditor, der die Erstellung von Webseiteninhalten vereinfachen soll. Dies ist ein WYSIWYG-Editor, der Textbearbeitungsfunktionen direkt auf Ihren Webseiten bereitstellt.

CKEditor ist eine Open-Source-Anwendung, das heißt, sie kann nach Ihren Wünschen geändert werden. Sein Nutzen ergibt sich aus einer aktiven Community, die nie aufhört, Anwendungen mit kostenlosen Add-ons und einem transparenten Entwicklungsprozess zu entwickeln.

Sie haben 4 Möglichkeiten, CKEditor herunterzuladen.

Ergebnis herunterladen:

Beispiele für CKEditor finden Sie im Ordner Proben:

Alle Beispiele dieses Artikels sind im Ordner enthalten Proben im CKEditor, den Sie heruntergeladen haben. Aber ich werde versuchen, es einfacher zu machen, damit es für Sie einfacher wird.

Erstellen Sie einen Ordner meineBeispiele, die Beispiele in diesem Artikel befinden sich in diesem Ordner.

Ein einfaches Beispiel ist die Verwendung von CKEditor.replace(..) zum Ersetzen über CKEditor .

replacebycode.html

Ersetzen Sie Textarea durch Code. Ersetzen Sie Textarea-Elemente mithilfe von JavaScript-Code

Hallo CKEditor

Siehe Beispiel:

Ergebnisse der Ausführung des Beispiels:

Mit habendem Attribut Name, und die Klasse „ckeditor“ wird automatisch durch CKEditor ersetzt.

Text

replacebyclass.html

Ersetzen Sie Textareas durch den Klassennamen. Ersetzen Sie Textareas-Elemente durch den Klassennamen

Hallo CKEditor

Ausführen des Beispiels:

Ein Beispiel für die Erstellung eines CKEditors mit JQuery.

jQuery-Adapter – CKEditor-Beispiel $(document).ready(function() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) Editoren mit jQuery erstellen

Hallo CKEditor

Wie Sie sehen, werden Konfigurationen durch ein einfaches JavaScript-Objekt festgelegt, das an die Methode create() übergeben wird.

Bei 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 möglicherweise unterschiedliche Editor-Setups in Ihrer Anwendung haben, die alle auf demselben Build basieren. Zu diesem Zweck müssen Sie die im Editor zur Laufzeit verfügbaren Plugins steuern.

Im folgenden Beispiel werden Überschriften- und Link-Plugins entfernt:

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 Standard-Symbolleistenkonfiguration ungültig. In diesem Fall müssen Sie die aktualisierte Symbolleistenkonfiguration wie im obigen Beispiel bereitstellen.

Fü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);

Da CKEditor-Builds nicht alle möglichen Funktionen enthalten, besteht die einzige Möglichkeit, ihnen weitere Funktionen hinzuzufügen, darin, einen benutzerdefinierten Build zu erstellen.

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

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

Mit dem folgenden Snippet können Sie alle in Ihrem Editor verfügbaren Symbolleistenelemente abrufen:

CKEditor 4 – WYSIWYG-Artikeleditor. Es ermöglicht Ihnen eine flexible Textformatierung, einschließlich der Arbeit mit Stilen, Listen, Links, Grafiken usw.

Abbildung 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:

Das Bedienfeld zum Umschalten der Editor-Anzeigemodi enthält die folgenden Schaltflächen:

Das Auswahlfeld für Druck- und Artikelvorlagen enthält die folgenden Schaltflächen:

Im Editor stehen folgende Operationen zum Arbeiten mit der Zwischenablage zur Verfügung:

Das Bedienfeld „Suchen und Ersetzen“ enthält die folgenden Schaltflächen:

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

Wenn 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 vorne 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, Feedback-Formular usw.

Das Formularerstellungsfenster enthält die folgenden Schaltflächen:

Wenn Sie auf die Schaltfläche „Formular“ klicken, öffnet sich das Einstellungsfenster für das neue Formular.

Das Formulareinstellungsfenster enthält die folgenden Felder:

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 verfügen über ein gepaartes Options-Tag. 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 Paar „Text – Wert“ 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...