H5-Editeur
Opération visuelle, glisser-déposer pour générer des pages, exporter des fichiers html
Il dispose d'un système de plug-in d'éditeur pour les développeurs, prend en charge l'héritage des projets existants et prend en charge le développement secondaire.
H5-Editor est un pur projet front-end, développé sur la base de Vue2, et génère des pages par glisser-déposer, similaire à Yiqixiu, Baidu H5, etc.
Démo
Cliquez ici pour accéder à la démo en ligne
Usage
git clone https://github.com/a7650/h5-editor.git
cd h5-editor
#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境
npm install
npm run dev
pile technologique
Principalement basé sur Vue2, Element-ui (utilisé en petite quantité), Vuex
Fonctions principales de l'éditeur
- Les éléments peuvent être déplacés, agrandis, réduits et pivotés librement
- Des images, du texte, des rectangles et des arrière-plans peuvent être ajoutés. Plusieurs fonctionnalités d'édition (police, arrière-plan, taille, marges, etc.)
- Adsorption automatique des composants et des guides en temps réel (les composants peuvent être automatiquement adsorbés et alignés avec le canevas, les guides personnalisés et d'autres composants, et afficher les guides en temps réel. Appuyez sur la touche alt pendant le glisser pour fermer temporairement)
- Règle, ligne de référence, ligne de référence personnalisable (cliquez sur la règle pour générer une ligne de référence, faites glisser la ligne de référence pour changer sa position, double-cliquez pour supprimer la ligne de référence)
- Annuler, refaire (prend en charge les touches de raccourci, nombre configurable d'étapes d'annulation)
- Copier, coller, verrouiller, masquer des composants, etc.
- ctrl + faites glisser les composants pour copier rapidement les composants
- Menu contextuel, le menu est configurable et peut être généré de manière flexible en fonction de l'état actuel du composant (c'est-à-dire que différents composants peuvent générer différents menus)
- Le panneau des calques vous permet de glisser-déposer des calques de composants, de les renommer et de verrouiller, supprimer et masquer rapidement les composants dans le panneau des calques.
- Sélectionnez plusieurs composants en même temps (appuyez sur ctrl + clic gauche) pour aligner plusieurs composants
- La sauvegarde des données est enregistrée localement via la base de données indexDB (une sauvegarde automatique et une sauvegarde manuelle sont disponibles) et les données peuvent être restaurées à partir de la sauvegarde.
- Générez du code h5 en un seul clic
- Modifier la taille du canevas
- Diverses touches de raccourci
- Centre de réglage, vous pouvez définir la fonction d'annulation, la fonction de sauvegarde, etc.
- Il existe un système de plug-ins pour les développeurs, qui peuvent être utilisés pour le développement secondaire. Veuillez vous référer à pluginA dans le répertoire des plugins.
