Erstellen Sie einen Rich-Text-Editor mit PHP und CKEditor

Mit der weit verbreiteten Nutzung von Webanwendungen wird die Erstellung von Rich-Text-Editoren immer häufiger. CKEditor gilt aufgrund seiner guten Anpassbarkeit und Benutzerfreundlichkeit weithin als einer der besten Rich-Text-Editoren. In diesem Artikel wird erläutert, wie Sie mit PHP und CKEditor einen Rich-Text-Editor erstellen.

Einführung in CKEditor

CKEditor ist ein plattformübergreifender Open-Source-Rich-Text-Editor, der über JavaScript implementiert wird. Es bietet eine intuitive und leicht verständliche Symbolleiste, einschließlich Schriftarten, Formatierung, Einfügen von Bildern und Tabellen, Linkeinstellungen, Rechtschreibprüfung und mehr. Zu den Hauptfunktionen von CKEditor gehören Anpassbarkeit, einfache Erweiterbarkeit und browserübergreifende Kompatibilität, was ihn zu einer der besten Optionen für die Erstellung von Rich-Text-Editoren macht.

Bevor Sie CKEditor verwenden

Stellen Sie zunächst sicher, dass Ihre Website über eine PHP-Umgebung verfügt. Wenn nicht, richten Sie es ein, indem Sie den Apache-Server, PHP und MySQL installieren. Wenn Sie diese Software bereits haben, können Sie CKEditor verwenden.

Schritt 1: CKEditor herunterladen

Laden Sie zunächst die neueste Version von CKEditor von der offiziellen Website von CKEditor (http://ckeeditor.com) herunter.

Schritt 2: Erstellen Sie eine HTML-Seite

Erstellen Sie im Dateimanager eine Datei mit dem Namen index.html und fügen Sie dann den folgenden Inhalt zur Datei hinzu:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
52e7fe5aab13b51b3671da4db954efc6
6c04bd5ca3fcae76e30b72ad730ca86d

<textarea id="editor1" name="editor1"></textarea>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Zeile 1 deklariert den HTML-Dokumenttyp.
Zeile 2 ist der Titel der HTML-Seite.
Zeile 3 stellt die JavaScript-Datei von CKEditor vor.
Zeile 6 erstellt ein 4750256ae76b6b9d804861d8f69e79d3-Element, das als Bearbeitungsbereich verwendet wird.
Zeile 7 initialisiert CKEditor.

Schritt 3: Laden Sie die CKEditor-Datei hoch.

Extrahieren Sie die heruntergeladene CKEditor-Datei in das Webverzeichnis auf Ihrem Server. Am besten speichern Sie die CKEditor-Datei im selben Verzeichnis wie index.html.

Schritt 4: Testen Sie den Rich-Text-Editor

Öffnen Sie die Datei index.html im Browser. Sie sehen einen Texteditor mit CKEditor. Sie können den Text und das Format nach Ihren Wünschen bearbeiten.

Erhalten Sie Daten von CKEditor mit PHP

Jetzt haben Sie mit CKEditor erfolgreich einen Rich-Text-Editor erstellt. Im nächsten Schritt erfahren Sie, wie Sie mit PHP Daten aus CKEditor abrufen. Bitte befolgen Sie die folgenden Schritte:

Schritt 1: Ändern Sie die HTML-Seite.

Fügen Sie ein Übermittlungsformular in index.html hinzu, um den vom Rich-Text-Editor bearbeiteten Inhalt an die PHP-Datei zu senden. Die geänderte HTML-Seite sieht so aus:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<form action="submit.php" method="POST">
    <textarea id="editor1" name="editor1"></textarea>
    <input type="submit" value="提交">
</form>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
< ; /html>

Zeilen 9–11 sind die hinzugefügten Formulare. Es verfügt über ein 4750256ae76b6b9d804861d8f69e79d3-Element, das den Bearbeitungsbereich darstellt, und außerdem über eine Senden-Schaltfläche.
Zeile 12 initialisiert CKEditor mit JavaScript.

Schritt 2: Datei „submit.php“ erstellen

Erstellen Sie im Dateimanager eine Datei mit dem Namen „submit.php“ und fügen Sie der Datei dann den folgenden Inhalt hinzu:

51739408a43bab8f896fbda2bd66903c

Dieses einfache PHP-Programm dient nur dazu, zu demonstrieren, wie man Daten von CKEditor erhält. Es überprüft das Array $_POST, um zu sehen, ob die Daten mit dem Namen „editor1“ bereits festgelegt sind, und zeigt sie gegebenenfalls an.

Schritt 3: Testen Sie die PHP-Datei

Im Schritt zur Verwendung von CKEditor zum Erstellen eines Rich-Text-Editors öffnen Sie index.html, geben Sie etwas Text ein und klicken Sie dann auf die Schaltfläche „Senden“. Nach dem Absenden sehen Sie den in „submit.php“ eingegebenen Inhalt.

Fazit

Das Erstellen eines Rich-Text-Editors mit PHP und CKEditor ist eine einfache, aber wichtige Aufgabe, die Ihnen dabei helfen kann, einen hochgradig angepassten Texteditor zu erstellen, der den Anforderungen Ihrer Website entspricht. Im Laufe der Zeit können Sie diesen Editor jederzeit aktualisieren und erweitern, um ihn an Ihre Bedürfnisse anzupassen. Ich hoffe, dieser Artikel hilft Ihnen bei der Erstellung eines nützlichen Rich-Text-Editors.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Rich-Text-Editor mit PHP und CKEditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!