NGTextEditor testen

Testen Sie alle Funktionen in Echtzeit

So verwenden Sie den Editor

Ein blockbasierter Editor mit Positionierungsraster

Dieser Editor arbeitet mit einem Blocksystem, das auf einem 12-Spalten-Raster positioniert wird. Im Gegensatz zu einem klassischen Editor, bei dem Sie sofort schreiben können, müssen Sie zuerst einen Block erstellen, um mit dem Schreiben zu beginnen.

Erstellen Sie Ihren ersten Block

Klicken Sie mit der rechten Maustaste irgendwo im Bearbeitungsbereich
Ein Menü erscheint mit zwei Optionen:
- Textblock : um Text zu schreiben, Listen zu erstellen, Zitate einzufügen usw.
- Medienblock : um Bilder, Videos, Tabellen oder Spalten einzufügen
Wählen Sie den gewünschten Blocktyp
Ein Fenster öffnet sich zur Konfiguration der Blockbreite (von 10% bis 100% der verfügbaren Breite)
Bestätigen Sie: Ein visuelles Raster erscheint zur Auswahl der Position Ihres Blocks
Klicken Sie auf die gewünschte Position im Raster, und Sie können mit dem Schreiben oder Einfügen von Inhalten beginnen

Das Positionierungsraster

Beim Erstellen oder Verschieben eines Blocks erscheint ein visuelles Raster:

Grüne Zellen : verfügbare Positionen zum Platzieren Ihres Blocks
Rote Zellen : von anderen Blöcken belegte Positionen
"Hier Zeile einfügen" : klickbare Bereiche zwischen bestehenden Zeilen, um eine neue Zeile an dieser Stelle zu erstellen
"Neue Zeile" : am unteren Rand des Rasters, um eine Zeile nach den bestehenden Zeilen hinzuzufügen

Block neu positionieren oder konfigurieren

Jeder Block hat eine Zahnrad-Schaltfläche (⚙) oben links. Diese einzelne Schaltfläche gruppiert alle Optionen:

Block im Raster neu positionieren
Blockbreite ändern
Hintergrundbild hinzufügen oder ändern
Block löschen

Diese übersichtliche Oberfläche mit einer einzigen Schaltfläche hält den Bearbeitungsbereich aufgeräumt.

Warum dieses System?

Dieser Block- und Rasteransatz ermöglicht es Ihnen:

Ihr Layout präzise mit dem 12-Spalten-Raster zu organisieren
Elemente nebeneinander zu platzieren (z.B. ein 50% Bild neben 50% Text)
Ihre Inhalte einfach über die Konfigurations-Schaltfläche neu zu organisieren
Ihr Dokument flexibel zu strukturieren
Zuverlässig und getreu dem Bearbeiteten in HTML und PDF zu exportieren

Tipps

Verwenden Sie die Schaltfläche "Blockumrisse" in der Symbolleiste, um Blockgrenzen zu visualisieren (blau für Text, grün für Medien)
Sie können einen Block in einem anderen Block für komplexe Layouts verschachteln
Blöcke werden automatisch im Raster positioniert: Wenn in einer Zeile nicht genug Platz ist, wechselt der Block in die nächste Zeile

Video-Tutorials ansehen

Testen Sie den Editor unten

Live-Vorschau

Nur Lesen

Der Inhalt des Editors wird hier in Echtzeit angezeigt...

Integration in 3 Schritten

                            <!-- Dateien importieren -->
                        
                            <link
                            rel="stylesheet"
                            href="NGTextEditor.min.css"
                            >
                        
                            <script
                            src="NGTextEditor.min.js"
                            ></script>
                        
                            <!-- Klasse hinzufügen -->
                        
                            <textarea
                            class="ngeditor"
                            id="my-editor"

                                      data-ngte-config="/config/mon-editeur.json"
                            ></textarea>

Übernehmen Sie die Kontrolle über Ihre Inhalte

Demo testen