H5-Herausgeber
Visuelle Bedienung, Drag & Drop zum Generieren von Seiten, Exportieren von HTML-Dateien
Es verfügt über ein Editor-Plug-In-System für Entwickler, unterstützt die Übernahme aus vorhandenen Projekten und unterstützt die Sekundärentwicklung.
H5-Editor ist ein reines Frontend-Projekt, das auf Basis von Vue2 entwickelt wurde und Seiten per Drag & Drop generiert, ähnlich wie Yiqixiu, Baidu H5 usw.
Demo
Klicken Sie hier, um zur Online-Demo zu gelangen
Verwendung
git clone https://github.com/a7650/h5-editor.git
cd h5-editor
#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境
npm install
npm run dev
Technologie-Stack
Basiert hauptsächlich auf Vue2, Element-ui (in geringer Menge verwendet), Vuex
Hauptfunktionen des Editors
- Elemente können frei gezogen, vergrößert, verkleinert und gedreht werden
- Es können Bilder, Text, Rechtecke und Hintergründe hinzugefügt werden. Mehrere Bearbeitungsfunktionen (Schriftart, Hintergrund, Größe, Ränder usw.)
- Automatische Adsorption von Komponenten und Echtzeit-Hilfslinien (Komponenten können automatisch adsorbiert und an der Leinwand, benutzerdefinierten Hilfslinien und anderen Komponenten ausgerichtet werden und Echtzeit-Hilfslinien anzeigen. Drücken Sie während des Ziehens die Alt-Taste, um sie vorübergehend zu schließen.)
- Lineal, Referenzlinie, anpassbare Referenzlinie (klicken Sie auf das Lineal, um eine Referenzlinie zu erstellen, ziehen Sie die Referenzlinie, um ihre Position zu ändern, doppelklicken Sie, um die Referenzlinie zu löschen)
- Rückgängig machen, Wiederherstellen (unterstützt Tastenkombinationen, konfigurierbare Anzahl von Rückgängig-Schritten)
- Komponenten kopieren, einfügen, sperren, ausblenden usw.
- Strg + Ziehen von Komponenten zum schnellen Kopieren von Komponenten
- Rechtsklick-Menü, das Menü ist konfigurierbar und kann entsprechend dem aktuellen Status der Komponente flexibel generiert werden (dh verschiedene Komponenten können unterschiedliche Menüs generieren).
- Im Ebenenbedienfeld können Sie Komponentenebenen per Drag-and-Drop verschieben, umbenennen und Komponenten im Ebenenbedienfeld schnell sperren, löschen und ausblenden.
- Wählen Sie mehrere Komponenten gleichzeitig aus (drücken Sie Strg + Linksklick), um mehrere Komponenten auszurichten
- Die Datensicherung wird lokal über die indexDB-Datenbank gespeichert (automatische Sicherung und manuelle Sicherung sind verfügbar) und Daten können aus der Sicherung wiederhergestellt werden.
- Generieren Sie H5-Code mit einem Klick
- Leinwandgröße bearbeiten
- Verschiedene Tastenkombinationen
- Im Einstellungscenter können Sie die Rückgängig-Funktion, die Backup-Funktion usw. einstellen.
- Für Entwickler gibt es ein Plug-in-System, das für die sekundäre Entwicklung verwendet werden kann. Bitte beziehen Sie sich auf „pluginA“ im Plugins-Verzeichnis.
