Heim > Web-Frontend > H5-Tutorial > So rufen Sie den HTML-Online-Editor auf und verwenden ihn

So rufen Sie den HTML-Online-Editor auf und verwenden ihn

黄舟
Freigeben: 2016-12-15 13:24:35
Original
2263 Leute haben es durchsucht

Der HTML-Online-Editor erfordert keine Kenntnisse in der Verwendung von Dreamweaver. Wenn Sie mit Word vertraut sind, können Sie diesen Editor sehr praktisch in Webprogrammen verwenden, die eine Textbearbeitung in Artikelsystemen oder Nachrichtensystemen erfordern.
Aber wie bettet man den HTML-Editor in die Webseite ein und wie erhält man die darin enthaltenen Daten? !
Zunächst gehen wir davon aus, dass der HTML-Online-Editor, den wir aufrufen möchten, auf einer separaten Seite platziert ist und der Dateiname gledit.htm lautet.
Es gibt zwei grundlegende Aufrufmethoden für den HTML-Online-Editor
1. Aufruf mit Objekt:
1. So betten Sie den HTML-Editor in die Webseite ein: Wir fügen den folgenden HTML-Code dort ein, wo er sein muss eingebettet: < object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT>
Auf die Daten im Objekt-Tag folgen die Daten, die wir haben Der Pfad und die ID der Editorseite sind die ID, die wir erhalten, wenn wir das Objekt aufrufen. Diese ID wird später beim Abrufen der Daten im Editor verwendet. Breite und Höhe sind die Höhe und Breite des Editors.
2. So erhalten Sie die Daten im HTML-Editor: Wir legen alle Inhalte, die übermittelt werden müssen, in einem Formular ab. Gleichzeitig können wir in diesem Formular einen Editor festlegen Versteckter Text. Bereich ( oder ) wird zum vorübergehenden Speichern von HTML verwendet Beim Senden Für die Daten des Online-Editors müssen wir den verborgenen Textbereich verwenden, um die Daten abzurufen, da der Inhalt des Objekts im Formular nicht direkt in ASP, JSP oder PHP abgerufen werden kann. Beim Absenden des Formulars kopieren wir den Inhalt des Objekts in den ausgeblendeten Textbereich. Der detaillierte Code lautet wie folgt:





Auf diese Weise können wir auf der Hintergrundverarbeitungsseite die Daten des HTML-Online-Editors direkt abrufen, indem wir die Daten von abrufen Inhalt des verborgenen Bereichs.

3. So laden Sie lokale Bilder in den HTML-Online-Editor im Texteditor hoch: Zuerst öffnen wir ein Fenster zum Hochladen von Bildern, wenn wir auf die Schaltfläche zum Einfügen von Bildern klicken Um lokale Bilder auf den Server hochzuladen, müssen wir den Pfad des Bildes aufzeichnen und dann das HTML-Tag, das das Bild anzeigt, zum Wert des HTML-Online-Editors hinzufügen. Die detaillierte Beschreibung und der Code lauten wie folgt:
Im Editor fügen wir das Ereignis onclick="window.open('img_upload.asp','img_upload','width=481 height=190')"> hinzu Schaltfläche zum Einfügen des Bildes ;In 'img_upload.asp' laden wir das übermittelte Bild auf den Server hoch, um ein Verzeichnis zu erstellen und dann den Bildpfad aufzuzeichnen

Dadurch können Sie hochgeladene Bilder einfach in den Editor einfügen.
4. So rufen Sie den HTML-Online-Editor auf, um die Daten beim Bearbeiten und Ändern des Artikels zu ändern: Wenn wir den HTML-Online-Editor senden, um die Daten beim Hinzufügen zur Datenbank zu ändern, müssen wir auch den HTML-Online-Editor verwenden können um den Inhalt der Datenbank zu bearbeiten, um die Daten zu ändern. Zuerst fügen wir dem Formular einen versteckten Bereich hinzu, um den Inhalt in der Datenbank zu platzieren, zum Beispiel , bitte beachten Sie, dass wir hier einen versteckten Textbereich anstelle einer versteckten Eingabe verwenden, da die Daten Wagenrückläufe und Zeilenvorschübe enthalten können. Wenn wir also "> Es ist möglich, dass ein HTML-Fehler auftritt, weil in <%=(rs("Content") ein Zeilenumbruch vorliegt %> (Wert= folgt Die empfangenen Daten müssen in einer Zeile stehen, sonst tritt ein Fehler auf, um den HTML-Online-Editor wie zuvor beschrieben aufzurufen.) Eigentlich müssen wir beim Absenden den umgekehrten Vorgang durchführen. Kopieren Sie einfach den Inhalt des Bereichs in den HTML-Online-Editor. Hier fügen wir im Textkörper, sodass Sie beim Laden der Seite den Inhalt der Datenbank zum Bearbeiten in den HTML-Online-Editor einfügen können. Der Übermittlungsprozess ist derselbe wie oben beschrieben, daher habe ich Ich werde hier nicht auf Details eingehen.

2. Verwenden Sie Iframe-Aufrufe (einige sind mit Objekten identisch). Beschreiben Sie kurz die wiederholten Aufrufe.
1. So fügen Sie Folgendes hinzu: Folgen Sie dem HTML-Code, wo er eingebettet werden muss: Die nach „src=" empfangenen Daten wollen wir aufrufen. Der Pfad zur Online-Editor-Seite ist die ID, wenn wir IFRAME aufrufen. Breite und Höhe sind die Höhe und Breite des Editors.
2. So erhalten Sie die Daten im HTML-Editor: Wir haben auch den gesamten Inhalt, der übermittelt werden muss, in einem Formular platziert und können einen versteckten Textbereich (<.) festlegen ;textarea name="content" style="display:none"> oder ) dient der temporären Speicherung der Daten des HTML-Online-Editors Beim Absenden nutzen wir den ausgeblendeten Textbereich, um die Daten zu erhalten. Beim Absenden des Formulars kopieren wir den Inhalt des Objekts in den ausgeblendeten Textbereich. Der detaillierte Code lautet wie folgt:
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}



< IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"> ;< /IFRAME>

Auf der Hintergrundverarbeitungsseite können wir die Daten des HTML-Online-Editors direkt abrufen, indem wir die Daten des verborgenen Bereichsinhalts abrufen.
2. So erhalten Sie die Daten im HTML-Editor: Wir legen alle Inhalte, die übermittelt werden müssen, in einem Formular ab. Gleichzeitig können wir in diesem Formular einen Editor festlegen Versteckter Text. Bereich ( oder ) wird zum vorübergehenden Speichern von HTML verwendet Beim Senden Für die Daten des Online-Editors müssen wir den verborgenen Textbereich verwenden, um die Daten abzurufen, da der Inhalt des Objekts im Formular nicht direkt in ASP, JSP oder PHP abgerufen werden kann. Beim Absenden des Formulars kopieren wir den Inhalt des Objekts in den ausgeblendeten Textbereich. Der detaillierte Code lautet wie folgt:





Auf diese Weise können wir auf der Hintergrundverarbeitungsseite die Daten des HTML-Online-Editors direkt abrufen, indem wir die Daten von abrufen Inhalt des verborgenen Bereichs.
3. So laden Sie lokale Bilder in den HTML-Online-Editor im Texteditor hoch: Zuerst öffnen wir ein Fenster zum Hochladen von Bildern, wenn wir auf die Schaltfläche zum Einfügen von Bildern klicken. Wir verwenden ein von uns geschriebenes Programm, um lokale Bilder in On hochzuladen Auf dem Server müssen wir dann den Pfad des Bildes aufzeichnen und dann das HTML-Tag einfügen, das das Bild an der Cursorposition anzeigt, indem wir eine Funktion in die Webseite schreiben, die den HTML-Online-Editor aufruft. Die detaillierte Beschreibung und der Code lauten wie folgt:
Im Editor fügen wir das Ereignis onclick="window.open('img_upload.asp','img_upload','width=481 height=190')"> hinzu Schaltfläche zum Einfügen des Bildes ;Auf der Seite, die den Editor aufruft, definieren wir die Funktion zum Einfügen von HTML-Code in den Editor

In der Datei, die das hochgeladene Bild verarbeitet, rufen wir die Funktion des übergeordneten Fensters auf, um HTML-Code einzufügen

Damit können Sie das hochgeladene Bild einfach in den Editor einfügen.
4. So rufen Sie den HTML-Online-Editor auf, um die Daten beim Bearbeiten und Ändern des Artikels zu ändern: Wenn wir den HTML-Online-Editor zum Ändern der Daten beim Hinzufügen verwenden, müssen wir auch den HTML-Online-Editor verwenden können Ändern Sie die Daten, nachdem Sie sie an die Datenbank übermittelt haben. Online-Editor, um Daten zu ändern. Zuerst fügen wir dem Formular einen versteckten Bereich hinzu, um den Inhalt in der Datenbank zu platzieren, zum Beispiel , hier fügen wir