Grundkentnisse für einen einfachen HTML-Editor In diesem Tipp wird demonstriert, wie man einen simplen HTML-Editor erstellt.
Autor:   Stefan Scholbe	Bewertung:     [ Jetzt bewerten ]	Views:  14.020
ohne Homepage	System:  Win8, Win10, Win11	Beispielprojekt auf CD

Geben Sie hier Ihre persönliche Bewertung ab! Anzahl Bewertungen bisher: 13 Bewertung insgesamt: sehr gut Durchschnittliche Bewertung: 4.7 von 5 Sternen

sehr gut     gut     nützlich     mittelmäßig     mangelhaft

Wenn man einen HTML-Editor machen möchte, denkt man oftmals erst an das Syntax-Highlightning. Das ist jedoch nicht das einzige was ein HTML-Editor benötigt (nicht obligatorisch gemeint), denn auch eine einfache Unterstützung für z. B. Die Schriftstil-Auswahl ist oft angenehm (Ich spreche aus Erfahrung). Dies lässt sich über die Substring-Funktion sehr leicht anstellen.

Dafür benötigen wir:

1. TextBox (Name = txtCode, MultiLine = True)
2. Button (Name = btnBold, Text = „B", Font = Times New Roman; 9.75pt; style=Bold)
3. Button (Name = btnItallic, Text = „I", Font = Times New Roman; 9.75pt; style=Italic)
4. Button (Name = btnUnderline, Text = „U", Font = Times New Roman; 9.75pt; style=Underline)
5. Button (Name = btnStrikeout,Text = „S", Font = Times New Roman; 9.75pt; style=Strikeout)
6. WebBrowser (Name = wbrPreview)

Die WebBrowser Komponente dient dafür, den Quelltext grafisch anzuzeigen.

Wenn alles platziert ist, sollte die Form etwa etwa so aussehen:

Nun zum Code (kommentiert)

Public Class Form1
 
  Private Sub btnStrikeout_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles btnUnderline.Click, btnStrikeout.Click, _
    btnItallic.Click, btnBold.Click
 
    ' Über CType wird eine Select-Routine gestartet
    Select Case CType(sender, Button).Text
      Case "B"
        With txtCode
          ' Der Text wird mit Substring "zerschnitten", und mit <b> am Start 
          ' sowie Ende des ausgewählten Bereich gesetzt
          .Text = .Text.Substring(0, .SelectionStart) & "<b>" & .SelectedText & "</b>" & _
            .Text.Substring(.SelectionStart + .SelectionLength, .Text.Length - _
            (.SelectionStart + .SelectionLength))
        End With
 
      Case "I"
        With txtCode
          ' Ebenfalls wie oben, jedoch Aufschrift "I" also wird <i> gesetzt
          .Text = .Text.Substring(0, .SelectionStart) & "<i>" & .SelectedText & "</i>" & _
            .Text.Substring(.SelectionStart + .SelectionLength, .Text.Length - _
            (.SelectionStart + .SelectionLength))
        End With
 
      Case "U"
        With txtCode
          ' Prinzip wie bei <i>
          .Text = .Text.Substring(0, .SelectionStart) & "<u>" & .SelectedText & "</u>" & _
            .Text.Substring(.SelectionStart + .SelectionLength, .Text.Length - _
            (.SelectionStart + .SelectionLength))
        End With
 
      Case "S"
        With txtCode
          ' Prinzip wie bei <i>
          .Text = .Text.Substring(0, .SelectionStart) & "<s>" & .SelectedText & "</s>" & _
            .Text.Substring(.SelectionStart + .SelectionLength, .Text.Length - _
            (.SelectionStart + .SelectionLength))
        End With
    End Select
  End Sub
 
  Private Sub txtCode_TextChanged(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles txtCode.TextChanged
 
    ' Setzt den Text in den Quelltext des WebBrowsers
    wbrPreview.DocumentText = txtCode.Text
  End Sub
End Class

Selbstverständlich können sie z. B. eine ComboBox für die Schriftart, ein Farbdialog für die Schriftfarbe etc. hinzufügen. Dies lässt sich mit diesen Kentnissen leicht anstellen.

Ich hoffe ich konnte Ihnen helfen.
Viel Spass!