Mit der rasanten Entwicklung des Internets sind Rich-Text-Editoren zu einem unverzichtbaren Bestandteil des Website-Entwicklungsprozesses geworden. Als inl?ndischer Open-Source-Rich-Text-Editor verfügt WangEditor über hervorragende Funktionen wie Benutzerfreundlichkeit, geringes Gewicht und umfangreiche Funktionen und ist nach und nach zur ersten Wahl vieler Entwickler geworden.

ThinkPHP6 bietet als eines der g?ngigsten PHP-Entwicklungsframeworks in China auch eine Fülle von Erweiterungsfunktionen, die Entwicklern bei der schnellen Integration des WangEditor-Rich-Text-Editors helfen k?nnen. In diesem Artikel wird detailliert beschrieben, wie Sie den Rich-Text-Editor WangEditor in ThinkPHP6 verwenden.

1. WangEditor herunterladen

Zuerst müssen wir den Quellcode des WangEditor-Editors herunterladen. Sie k?nnen die neueste Version von der offiziellen Website von WangEditor herunterladen (https://www.wangeditor.com/). Kopieren Sie nach dem Entpacken des Quellcodes das Verzeichnis in das ?ffentliche Verzeichnis in unserem ThinkPHP6-Projekt.

2. WangEditor-Ressourcendateien vorstellen

Auf den Seiten, auf denen wir WangEditor verwenden müssen, müssen wir die folgenden Ressourcendateien einführen:

<link rel="stylesheet" type="text/css" href="/public/wangEditor-3.1.1/release/wangEditor.min.css">
<script type="text/javascript" src="/public/wangEditor-3.1.1/release/wangEditor.min.js"></script>

Unter diesen ist wangEditor.min.css die Stildatei von WangEditor und wangEditor. min.js ist die Stildatei der WangEditor-Haupt-Javascript-Datei.

3. Erstellen Sie die Seite

Auf der Seite, auf der wir WangEditor verwenden müssen, müssen wir einen Div-Container erstellen, um den Editor anzuzeigen und eine ID festzulegen. Zum Beispiel:

<div id="editor"></div>

4. WangEditor initialisieren

Nachdem die Seite geladen wurde, müssen wir WangEditor initialisieren und relevante Parameter dafür festlegen. Hier ist ein einfaches Beispiel:

<script type="text/javascript">
    var editor = new wangEditor('#editor');
    editor.create();
</script>

wobei #editor die ID des Div ist, das wir festgelegt haben. Instanziieren Sie über var editor = new wangEditor('#editor'); und initialisieren Sie den Editor dann über die Methode editor.create(). Zu diesem Zeitpunkt kann unsere Seite den Rich-Text-Editor WangEditor verwenden.

5. Editor-Parameter festlegen

Zus?tzlich zur Initialisierung des Editors k?nnen wir die Editor-Parameter auch nach Bedarf festlegen. Hier sind einige Beispiele, die Sie je nach Bedarf ausw?hlen k?nnen:

Legen Sie die Breite und H?he des Editors fest Schnittstelle zum Hochladen von Bildern

var editor = new wangEditor('#editor');
editor.config.height = 500;    //設(shè)置編輯器高度
editor.config.width = '100%';  //設(shè)置編輯器寬度

6. Holen Sie sich den Inhalt in den Editor

Nachdem der Benutzer die Bearbeitung abgeschlossen hat, müssen wir den Inhalt in den Editor laden. Hier ist ein einfaches Beispiel:

var editor = new wangEditor('#editor');
editor.config.colors = [    //設(shè)置顏色選項
    '#000000', '#eeece0', '#1c487f', '#4d80bf', '#c9c9c9', 
    '#999999', '#005bac', '#ccb8b8', '#7f7f7f', '#f5f5f5', 
    '#c3d69b', '#acc8cc', '#d5e8d4', '#f6cfca', '#ff5555'
];
editor.config.menus = [
    'forecolor',  //字體顏色
    'bgcolor'     //背景顏色
];

wobei die Methode editor.txt.html() den HTML-String im Editor zurückgibt.

Zusammenfassung

Das Obige ist eine detaillierte Einführung in die Verwendung des WangEditor-Rich-Text-Editors in ThinkPHP6. Durch einfaches Einführen von Ressourcendateien, Erstellen von Seiten, Initialisieren des Editors und Festlegen von Parametern k?nnen wir den WangEditor-Rich-Text-Editor schnell integrieren und Rich-Text-Bearbeitungsfunktionen einfach implementieren.

Das obige ist der detaillierte Inhalt vonWie verwende ich den Rich-Text-Editor WangEditor in ThinkPHP6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!