Wie eine HTML-Editor-Anwendung erstellen
Diese Dokumentation wird archiviert und wird nicht gepflegt werden.
Dieses Tutorial beschreibt, wie Funktionen in Microsoft Internet Explorer 5.5 oder höher eine HTML-Editor-Anwendung erstellen gefunden verwenden. Die Anwendung, die Sie in diesem Tutorial erstellen enthält einen bearbeitbaren Bereich, in dem Benutzer und Format Text eingeben können alle Standard-Formatierungsbefehle. Zum Beispiel kann der Anwender den Text fett oder kursiv machen, um die Schriftgröße ändern, und Aufzählungen oder nummerierten Listen machen. Eine Symbolleiste bietet die Formatierungs Tasten, Knöpfe zum Öffnen und Speichern von Dateien, und Dropdown-Listenfelder für Schriftart und Block Formatierung Auswahl. Ein Menü ermöglicht alternativen Zugriff auf die Funktionalität von der Werkzeugleiste zur Verfügung gestellt. Ab Internet Explorer 6 können Sie auch das HtmlDlgSafeHelper-Objekt verwenden, das Gesicht oder die Farbe der Schriftart zu ändern.
Mit dieser HTML-Editor Anwendung können Benutzer HTML-Dokumente erstellen und sie in HTML- oder Text-Format auf der Festplatte speichern. Wenn als HTM-Datei gespeichert haben, sind die Dokumente sichtbar in Windows Internet Explorer oder im HTML-Editor-Anwendung. Dateien gespeichert als .txt kann in einem beliebigen Texteditor angezeigt werden.
Dieses Tutorial zeigt, wie folgendes zu tun:
- Erstellen und Verwenden von bearbeitbare Bereiche mit dem Attribut contentEditable.
- Verwenden Sie die Formatierung Auftragskennungen und die execCommand Methode.
- Verwenden Sie die Symbolleiste Elementverhalten WebControls Internet Explorer. sowie ein Menüelement Verhalten und eine HTML + TIME (Timed Interactive Multimedia Extensions) zeit2 Verhalten, das einen Begrüßungsbildschirm anzeigt.
- Verwenden Sie das HtmlDlgSafeHelper Objekt, um die Schriften zugreifen und Block-Formate auf einem Computer des Benutzers und die Farbe im Dialogfeld angezeigt werden soll. Internet Explorer 6 stellt das HtmlDlgSafeHelper Objekt.
- Erstellen Sie eine HTML-Anwendung (HTA).
Anforderungen und Abhängigkeiten
Entwickler, die einen HTML-Editor erstellt werden sollen, wie in diesem Tutorial beschrieben werden, sollte mit Microsoft JScript und Dynamic HTML (DHTML) vertraut sein. Die Kenntnis des Elementverhaltens ist auch hilfreich.
Die Steuerung von Common in diesem Tutorial verwendet, um das Öffnen zum Anzeigen und Speichern unter Dialogfelder ist ein lizenziertes Steuerelement, das einen gültigen Entwurfszeitlizenz erfordert. Sie können die Probe laufen, aber Sie diese Funktionalität nicht schaffen können, wenn Sie Microsoft Visual Basic oder Microsoft Visual InterDev auf Ihrer Entwicklungsmaschine installiert haben. Weitere Informationen finden Sie HOWTO: Einrichten von Internet Download für Comdlg32.ocx.
Sie können eine beliebige HTML-Entwicklungsumgebung wie Visual InterDev verwenden, dieses Tutorial abzuschließen. Visual InterDev ist eine gute Wahl, weil es eine Entwurfszeitlizenz für die Steuerung von Common zur Verfügung stellt.
Die meisten der Technologie in diesem Tutorial beschrieben wird von Internet Explorer 5.5 oder höher unterstützt, mit der bemerkenswerten Ausnahme des HtmlDlgSafeHelper-Objekt, das den Internet Explorer 6 erfordert.
Dieses Tutorial erfordert eine Reihe von abhängigen Dateien, um richtig zu funktionieren, einschließlich der Symbole für die Schaltflächen der Symbolleiste und zwei HTML-Komponenten (HTCs). Alle diese Dateien werden im HTML-Editor Probe-Download enthalten. Bevor Sie mit dem Tutorial beginnen, müssen Sie die HTML-Editor Datei herunterzuladen. Folgen Sie den Anweisungen auf der Download-Seite vor dem Implementierungsschritte fortgesetzt.
Implementierungsschritte
Dieser Abschnitt beschreibt, Schritt-für-Schritt, wie Sie einen WYSIWYG-HTML-Editor HTA erstellen.
Schritt 1: Erstellen Sie die HTML-Datei
Die HTML-Datei, die Sie in diesem Schritt schaffen dient als Grundlage für die Funktionen, die Sie hinzufügen, um das Tutorial fortschreitet.
- Erstellen Sie eine HTML-Datei. Diese Datei sollte die Standard-HTML-Tags enthalten, einschließlich HTML. KOPF. und Körper. Sie können auch ein Titel-Element im HEAD-Abschnitt, wenn Sie möchten. Das folgende Codebeispiel zeigt, wie die HTML aussehen sollte.
Zwei Toolbar Elemente verwendet werden, so dass sie auf zwei getrennten Reihen anzuzeigen.
Das folgende Beispiel zeigt das oToolbarToolbar Element.
Hinweis: Die Reihenfolge der Elemente in dem HTML-Quellcode bestimmt die Reihenfolge der auf der gerenderten Seite angezeigten Elemente. Achten Sie darauf, jedes Element in seinem richtigen Platz hinzufügen die richtige Darstellung zu gewährleisten.
Schritt 3: Erstellen Sie die Textformatierungsfunktionen
Die Funktionen, die in diesem Schritt erzeugt sind aus den Elementen Toolbarbutton in der letzten Stufe erzeugt. Diese umfassen eine Funktion, die in dieser Probe sowie Funktionen verwendet die meisten der Formatierungsbefehle ausführt, die Eigenschaft Fontsize zu ändern und die Ausrichtung des Textes zu ändern.
Sie legen auch das HtmlDlgSafeHelper Objekt und Schreibfunktionen, die dieses Objekt verwenden, um die Farbe Dialogfeld anzuzeigen und die ForeColor oder Backcolor zu ändern. basierend auf der Auswahl des Benutzers. Sie schreiben auch Funktionen, die das HtmlDlgSafeHelper Objekt nutzen eine Reihe von Schriften und eine Reihe von Block-Formate auf dem System des Benutzers installiert abzurufen, ToolbarDropDownList Elemente auf der Toolbarbutton mit diesen Arrays, und ändern Sie die Schrift oder das Format der Auswahl der bearbeitbaren Bereich bevölkern basierend auf der Auswahl des Benutzers.
Erstellen Sie alle Funktionen in diesem Schritt im SCRIPT-Block.- Erstellen Sie eine Funktion callFormatting mit einem einzigen Eingabeparameter aufgerufen, die execCommand Methode aufruft. Der Parameter übergibt die entsprechenden Auftragskennungen auf die Funktion basierend auf dem Toolbarbutton geklickt wird.