Detaillierte Einführung in die Installation und Verwendung des Baidu-Editors php UEditor

In diesem Artikel wird hauptsächlich UEditor Baidu vorgestelltEditorInstallation Teilen mit die Verwendungsmethode. Freunde, die es benötigen, können darauf verweisen

1. Laden Sie das vollständige Quellcodepaket von der offiziellen Website herunter und entpacken Sie es in ein beliebiges VerzeichnisVerzeichnisstruktur lautet wie folgt:

_examples: Beispielseite der Vollversion des Editors
_demos: Verschiedene Anwendungsfälle des Editors
Dialoge: Ressourcen und JS entsprechend dem Popup-Dialogfeld Dateien
Themen: Stile Bilder und Stildateien
Server: PHP, JSP und andere an serverseitigen Vorgängen beteiligte Dateien
Drittanbieter: Plug-Ins von Drittanbietern
editor_all.js: eine gepackte Datei aller Dateien im _src-Verzeichnis
editor_all_min.js: eine komprimierte Version der Datei editor_all.js Verwenden Sie
editor_config.js nur für die formale Bereitstellung: Konfiguration der Editordatei , es wird empfohlen, sie im selben Verzeichnis wie die Editor-Instanziierungsseite zu platzieren

2. Schritte zum Bereitstellen von UEditor im eigentlichen Projekt (UETest):

Schritt eins: Erstellen Sie ein Verzeichnis zum Speichern von UEditor-bezogenen Ressourcen und Dateien in einem beliebigen Ordner des Projekts . Erstellen Sie es hier im Projektstammverzeichnis und benennen Sie es
Zweitens: Kopieren Sie die Dialoge, Themes, Drittanbieter, editor_all.js und editor_config.js in den Ueditor-Ordner Bei den Dateien mit Ausnahme des ueditor-Verzeichnisses handelt es sich um spezifische Projektdateien, und zwar nur um die hier aufgeführten. Schritt 3: Der Einfachheit halber wird die Seite index.php im Stammverzeichnis als Instanziierungsseite des Editors verwendet Um die Vollversion von UEditor anzuzeigen, importieren Sie zunächst die drei vom Editor benötigten
Eintragsdateien:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css" rel="external nofollow" >

Schritt 4 : Erstellen Sie dann die Editor-Instanz und ihren DOM-Container in der Datei index.php:

<p id="myEditor"></p>
<script type="text/javascript">
 var editor = new baidu.editor.ui.Editor();
 editor.render("myEditor");
</script>

Der letzte Schritt: Fügen Sie den folgenden Code oben in der Editor-Instanz hinzu:

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;ueditor/&#39;;//此为ueditor相对于实例页面的路径
</script>

Das Obige ist ein relativer Pfad. Sie können ihn auch relativ verwenden. Der absolute Pfad zum Stammverzeichnis der Website, z. B.:

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;/uc/ueditor/&#39;;//此为ueditor相对于网站根目录的路径
</script>

Es wird empfohlen, den absoluten Pfad relativ zu verwenden zum Website-Stammverzeichnis.

Zu diesem Zeitpunkt wurde eine vollständige Editor-Instanz für unser Projekt bereitgestellt

Der letzte Schritt kann auch durch Ändern der folgenden Stellen erreicht werden (nicht empfohlen für Personen, die dies nicht tun). js verstehen):
Suchen Sie nach „URL= window.UEDITOR_HOME_URL||“ und ändern Sie es in den entsprechenden Pfad. Wenn Sie es hier ändern, ist window.UEDITOR_HOME_URL nicht erforderlich auf der Instanzseite festzulegen.

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3. Spezifische Verwendung

1. Senden Sie den Editorinhalt an das Backend

Szenario 1: Im Formular, in dem sich der Editor befindet Es gibt eine Schaltfläche „Senden“ , und der Übermittlungsvorgang wird durch Klicken auf diese Schaltfläche abgeschlossen. Dieses Szenario ist für die häufigsten Situationen geeignet. Es sind keine großen Probleme zu beachten. Es sind nur drei Punkte zu beachten:
1) Standardmäßig wird der Name des Formulars verwendet Der Hintergrund ist „editorValue“ und befindet sich in editor_config.js. Es kann konfiguriert werden und der Parametername lautet textarea.
2) Das Namens-
-Attribut kann auf dem Container-Tag (d. h. dem Skript-Tag) festgelegt werden, um die Standardkonfiguration in editor_config.js zu überschreiben. Der Beispielcode lautet wie folgt, myContent wird hier zum neuen Namen des Übermittlungsformulars:

<form action="" method="post">
 <script type="text/plain" id="editor" name="myContent">
 </script>
 <input type="submit" name="submit" value="提交">
</form>

3) Das Back-End-Empfängerprogramm kann den Rich-Text-Inhalt im Editor auf folgende Weise abrufen.

//PHP获取：
$_POST["myContent"]
   
//JSP获取：
request.getParameter("myContent");
   
//ASP获取：
request("myContent");
   
//NET获取:
context.Request.Form["myContent"];

Szenario 2: Es gibt keine Senden-Schaltfläche im Formular, in dem sich der Editor befindet, und die Übermittlungsaktion wird durch das externe -Ereignis ausgelöst. Dieses Szenario eignet sich für Websites mit viel Front-End-Interaktion. Das Wichtigste, worauf Sie achten sollten, ist die Durchführung des Editor-Inhaltssynchronisierungsvorgangs, bevor die Formularübermittlungsaktion ausgelöst wird. Das allgemeine Codemuster lautet wie folgt:

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContent()){ //此处以非空为例
 editor.sync();  //同步内容
 someForm.submit(); //提交Form
}

Hier ist Editor das Editor-Instanz-

-Objekt .

Szenario 3: Der Herausgeber befindet sich in keiner Form und die Übermittlungsaktion wird durch externe Ereignisse ausgelöst.

Dieses Szenario wird nicht oft verwendet, kann aber unter besonderen Umständen erforderlich sein. UEditor bietet auch entsprechende Verarbeitungslösungen. Die Grundlogik ist dieselbe wie in Szenario 2, außer dass Sie beim Durchführen von Synchronisierungsvorgängen die ID des übermittelten Formulars übergeben müssen, z. B. editor.sync(myFormID). Andere sind die gleichen wie Szene 2.

2. Inhalte aus der Datenbank lesen

<script type="text/plain" id="editor">
 //从数据库中取出文章内容打印到此处
</script>

Hier wird das Skript-Tag als Editor-Containerobjekt verwendet und sein Typ wird auf einfachen Text gesetzt, wodurch die Ausführung von JS-Code innerhalb der Datenbank vermieden wird Gleichzeitig wird das zusätzliche Transkodierungsproblem gelöst, das dadurch entsteht, dass einige Schüler herkömmliche Textbereichs-Tags als Container verwenden.

3. Initialisierung des Editorinhalts (d. h. Festlegen von Rich Text im Editor)

Schreiben Sie einen neuen Artikel und voreingestellte Eingabeaufforderungen, Begrüßungen und andere Inhalte im Editor.
Suchen Sie den Parameter initialContent in der Datei editor_config.js und legen Sie seinen Wert auf die erforderliche Eingabeaufforderung oder Begrüßung fest, z. B. initialContent: „Willkommen bei UEditor!“.

4. Bild-Upload

Wenn es sich um eine neue Site handelt, das heißt, wenn der Bildpfad den eigenen Pfad des Herausgebers verwendet, besteht keine Notwendigkeit, ihn zu ändern Die alte Site verfügt bereits über einen eigenen Bildordner. Die folgenden Dateien im Ordner ueditor/php müssen geändert werden:

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Installation und Verwendung des Baidu-Editors php UEditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!