MiniEditor · FWT Dokumentation

Formulare / MiniEditor

MiniEditor in FWT

Der FWT-MiniEditor ist eine sichere Schreiboberfläche auf Basis einer echten Textarea. Er soll deutlich hochwertiger wirken als ein normales Textfeld, bleibt aber bewusst kontrolliert und sicher.

Die Toolbar fügt einfache Textzeichen ein, zum Beispiel für Fett, Kursiv, Überschriften, Listen, Zitate und Links. HTML wird nicht ausgeführt.

Wichtig: Der MiniEditor ist kein unsicherer HTML-WYSIWYG-Editor. Die Textarea bleibt die Datenquelle.

Standard

MiniEditor mit Toolbar und sicherer Vorschau

Der Standard-MiniEditor zeigt Toolbar, Textarea, sichere Vorschau, Hilfeliste und Statuszeile.

Live-Beispiel

Beschreibung

FWT MiniEditor

Sichere Schreiboberfläche mit Toolbar, Textarea und Vorschau.

Sicherer Textmodus

Bereit 0 Zeichen

Dieser MiniEditor nutzt eine echte Textarea als sichere Grundlage.

HTML-Code anzeigen

<div class="fwt-form-group">
    <label class="fwt-label" for="minieditor-standard">
        Beschreibung
    </label>

    <div class="fwt-minieditor" data-fwt-minieditor>
        <div class="fwt-minieditor-head">
            <div>
                <h3 class="fwt-minieditor-title">
                    FWT MiniEditor
                </h3>

                <p class="fwt-minieditor-text">
                    Sichere Schreiboberfläche mit Toolbar, Textarea und Vorschau.
                </p>
            </div>

            <span class="fwt-minieditor-badge">
                Sicherer Textmodus
            </span>
        </div>

        <div class="fwt-minieditor-toolbar" aria-label="MiniEditor Werkzeugleiste">
            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="bold">
                    B
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="italic">
                    I
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="heading">
                    H
                </button>
            </div>

            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="list">
                    Liste
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="quote">
                    Zitat
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="link">
                    Link
                </button>
            </div>

            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool fwt-minieditor-tool-muted" type="button" data-fwt-minieditor-action="linebreak">
                    ↵
                </button>

                <button class="fwt-minieditor-tool fwt-minieditor-tool-muted" type="button" data-fwt-minieditor-action="clear">
                    Leeren
                </button>
            </div>
        </div>

        <div class="fwt-minieditor-body">
            <div class="fwt-minieditor-main">
                <textarea
                    class="fwt-minieditor-textarea"
                    id="minieditor-standard"
                    name="description"
                    placeholder="Schreibe hier deinen Text..."
                >Dies ist ein sicherer MiniEditor.

                Du kannst Text markieren und die Toolbar nutzen.

                Es wird kein HTML in der Vorschau ausgeführt.</textarea>
            </div>

            <aside class="fwt-minieditor-side">
                <div class="fwt-minieditor-preview">
                    <h4 class="fwt-minieditor-preview-title">
                        Sichere Vorschau
                    </h4>

                    <pre class="fwt-minieditor-preview-output" data-fwt-minieditor-preview></pre>
                </div>

                <ul class="fwt-minieditor-help-list">
                    <li>Fett wird als **Text** eingefügt.</li>
                    <li>Kursiv wird als *Text* eingefügt.</li>
                    <li>Links werden als sichere Textstruktur eingefügt.</li>
                    <li>Kein HTML wird ausgeführt.</li>
                </ul>
            </aside>
        </div>

        <div class="fwt-minieditor-status">
            <span data-fwt-minieditor-status>Bereit</span>
            <span class="fwt-minieditor-counter" data-fwt-minieditor-counter>0 Zeichen</span>
        </div>
    </div>

    <p class="fwt-help">
        Dieser MiniEditor nutzt eine echte Textarea als sichere Grundlage.
    </p>
</div>

Kompakt

Kompakter MiniEditor

Die kompakte Variante eignet sich für kurze Hinweise, interne Notizen oder einfache Beschreibungen.

Live-Beispiel

Kurzer Hinweis

Kompakter MiniEditor

Für kurze Hinweise, interne Notizen oder einfache Beschreibungen.

Bereit 0 Zeichen

HTML-Code anzeigen

<div class="fwt-form-group">
    <label class="fwt-label" for="minieditor-compact">
        Kurzer Hinweis
    </label>

    <div class="fwt-minieditor fwt-minieditor-compact fwt-minieditor-simple" data-fwt-minieditor>
        <div class="fwt-minieditor-head">
            <div>
                <h3 class="fwt-minieditor-title">
                    Kompakter MiniEditor
                </h3>

                <p class="fwt-minieditor-text">
                    Für kurze Hinweise, interne Notizen oder einfache Beschreibungen.
                </p>
            </div>
        </div>

        <div class="fwt-minieditor-toolbar" aria-label="MiniEditor Werkzeugleiste">
            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="bold">
                    B
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="italic">
                    I
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="list">
                    Liste
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="clear">
                    Leeren
                </button>
            </div>
        </div>

        <div class="fwt-minieditor-body">
            <div class="fwt-minieditor-main">
                <textarea
                    class="fwt-minieditor-textarea"
                    id="minieditor-compact"
                    name="note"
                    placeholder="Kurzen Hinweis eingeben..."
                ></textarea>
            </div>
        </div>

        <div class="fwt-minieditor-status">
            <span data-fwt-minieditor-status>Bereit</span>
            <span class="fwt-minieditor-counter" data-fwt-minieditor-counter>0 Zeichen</span>
        </div>
    </div>
</div>

Dark

MiniEditor Dark

Die dunkle Variante wirkt technischer und hochwertiger. Sie eignet sich für Adminbereiche, Webtools oder Doku-Oberflächen.

Live-Beispiel

Dunkler MiniEditor

MiniEditor Dark

Für hochwertige Adminbereiche, Doku-Tools oder technische Oberflächen.

Dark

Bereit 0 Zeichen

HTML-Code anzeigen

<div class="fwt-form-group">
    <label class="fwt-label" for="minieditor-dark">
        Dunkler MiniEditor
    </label>

    <div class="fwt-minieditor fwt-minieditor-dark" data-fwt-minieditor>
        <div class="fwt-minieditor-head">
            <div>
                <h3 class="fwt-minieditor-title">
                    MiniEditor Dark
                </h3>

                <p class="fwt-minieditor-text">
                    Für hochwertige Adminbereiche, Doku-Tools oder technische Oberflächen.
                </p>
            </div>

            <span class="fwt-minieditor-badge">
                Dark
            </span>
        </div>

        <div class="fwt-minieditor-toolbar" aria-label="MiniEditor Werkzeugleiste">
            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="bold">
                    B
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="italic">
                    I
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="heading">
                    H
                </button>
            </div>

            <div class="fwt-minieditor-toolbar-group">
                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="list">
                    Liste
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="quote">
                    Zitat
                </button>

                <button class="fwt-minieditor-tool" type="button" data-fwt-minieditor-action="link">
                    Link
                </button>
            </div>
        </div>

        <div class="fwt-minieditor-body">
            <div class="fwt-minieditor-main">
                <textarea
                    class="fwt-minieditor-textarea"
                    id="minieditor-dark"
                    name="dark_text"
                    placeholder="Text eingeben..."
                >## Beispiel

Dieser Editor sieht hochwertiger aus, bleibt aber sicher.</textarea>
            </div>

            <aside class="fwt-minieditor-side">
                <div class="fwt-minieditor-preview">
                    <h4 class="fwt-minieditor-preview-title">
                        Sichere Vorschau
                    </h4>

                    <pre class="fwt-minieditor-preview-output" data-fwt-minieditor-preview></pre>
                </div>

                <ul class="fwt-minieditor-help-list">
                    <li>Gut für Admin- oder Tool-Oberflächen.</li>
                    <li>Die Textarea bleibt die Datenquelle.</li>
                    <li>Kein HTML wird ausgeführt.</li>
                </ul>
            </aside>
        </div>

        <div class="fwt-minieditor-status">
            <span data-fwt-minieditor-status>Bereit</span>
            <span class="fwt-minieditor-counter" data-fwt-minieditor-counter>0 Zeichen</span>
        </div>
    </div>
</div>

Funktionen

Toolbar-Funktionen

Die Toolbar erzeugt sichere Textauszeichnungen. Es wird kein HTML erzeugt und kein Code ausgeführt.

Fett

Markierter Text wird mit zwei Sternchen umschlossen.

**fetter Text**

Kursiv

Markierter Text wird mit einem Sternchen umschlossen.

*kursiver Text*

Überschrift

Die Zeile bekommt ein Überschrift-Präfix.

## Überschrift

Liste

Jede markierte Zeile bekommt einen Listenstrich.

- Listenpunkt

Zitat

Jede markierte Zeile bekommt ein Zitatzeichen.

> Zitat oder Hinweis

Link

Links werden als sichere Textstruktur eingefügt.

[Linktext](https://example.de)

Sicherheit

Sicherheitsprinzip

Der MiniEditor soll beim Schreiben helfen, aber keine unsicheren Inhalte ausführen. Deshalb wird die Vorschau sicher als Text ausgegeben.

HTML wird nicht ausgeführt.

JavaScript-Code wird nicht ausgeführt.

Die Textarea bleibt die echte Datenquelle.

Linkziele werden im JavaScript nur eingeschränkt eingefügt.

Barrierefreiheit

MiniEditor richtig verwenden

Textarea bleibt nutzbar

Der Editor muss auch ohne Toolbar bedienbar bleiben.

<textarea class="fwt-minieditor-textarea"></textarea>

Label verwenden

Der MiniEditor braucht wie jedes Formularfeld ein sichtbares Label.

<label class="fwt-label" for="text">Text</label>

Buttons verständlich halten

Toolbar-Buttons sollten später zusätzlich Tooltips oder Texte bekommen.

data-fwt-minieditor-action="bold"

Keine HTML-Ausführung

Nutzereingaben dürfen nicht ungeprüft als HTML ausgegeben werden.

textContent statt innerHTML

Vorschau erklären

Nutzer müssen wissen, dass die Vorschau sicherer Text ist.

Sichere Vorschau

Release II planen

Weitere Formatierungen können später ergänzt werden, aber kontrolliert.

Release II: kontrollierte Erweiterung