Editor H5
Operación visual, arrastrar y soltar para generar páginas, exportar archivos html
Tiene un sistema de complemento de editor para desarrolladores, admite la herencia de proyectos existentes y admite el desarrollo secundario.
H5-Editor es un proyecto front-end puro, desarrollado en base a Vue2, y genera páginas mediante arrastrar y soltar, similar a Yiqixiu, Baidu H5, etc.
Manifestación
Haga clic aquí para acceder a la demostración en línea
Uso
git clone https://github.com/a7650/h5-editor.git
cd h5-editor
#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境
npm install
npm run dev
pila de tecnología
Basado principalmente en Vue2, Element-ui (usado en pequeñas cantidades), Vuex
Funciones principales del editor
- Los elementos se pueden arrastrar, ampliar, reducir y rotar libremente.
- Se pueden agregar imágenes, texto, rectángulos y fondos. Múltiples funciones de edición (fuente, fondo, tamaño, márgenes, etc.)
- Adsorción automática de componentes y guías en tiempo real (los componentes se pueden adsorber y alinear automáticamente con el lienzo, guías personalizadas y otros componentes, y mostrar guías en tiempo real. Presione la tecla alt mientras arrastra para cerrar temporalmente)
- Regla, línea de referencia, línea de referencia personalizable (haga clic en la regla para generar una línea de referencia, arrastre la línea de referencia para cambiar su posición, haga doble clic para eliminar la línea de referencia)
- Deshacer, rehacer (admite teclas de acceso directo, número configurable de pasos para deshacer)
- Copiar, pegar, bloquear, ocultar componentes, etc.
- Ctrl + arrastrar componentes para copiar componentes rápidamente.
- Menú contextual, el menú es configurable y se puede generar de manera flexible de acuerdo con el estado actual del componente (es decir, diferentes componentes pueden generar diferentes menús)
- El panel de capas le permite arrastrar y soltar capas de componentes, cambiarles el nombre y bloquear, eliminar y ocultar rápidamente componentes en el panel de capas.
- Seleccione varios componentes al mismo tiempo (presione Ctrl + clic izquierdo) para alinear varios componentes.
- La copia de seguridad de los datos se guarda localmente a través de la base de datos indexDB (hay disponibles copias de seguridad automáticas y manuales) y los datos se pueden restaurar desde la copia de seguridad.
- Genera código h5 con un clic
- Editar tamaño del lienzo
- Varias teclas de acceso directo
- Centro de configuración, puede configurar la función deshacer, la función de copia de seguridad, etc.
- Existe un sistema de complementos para desarrolladores, que se puede utilizar para el desarrollo secundario. Consulte el complementoA en el directorio de complementos.
