Editor H5
Operação visual, arrastar e soltar para gerar páginas, exportar arquivos html
Possui um sistema de plug-in de editor para desenvolvedores, suporta herança de projetos existentes e suporta desenvolvimento secundário.
H5-Editor é um projeto front-end puro, desenvolvido com base em Vue2, e gera páginas através de arrastar e soltar, semelhante a Yiqixiu, Baidu H5, etc.
Demonstração
Clique aqui para acessar a demonstração online
Uso
git clone https://github.com/a7650/h5-editor.git
cd h5-editor
#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境
npm install
npm run dev
pilha de tecnologia
Baseado principalmente em Vue2, Element-ui (usado em pequena quantidade), Vuex
Principais funções do editor
- Os elementos podem ser arrastados, ampliados, reduzidos e girados livremente
- Imagens, texto, retângulos e planos de fundo podem ser adicionados. Vários recursos de edição (fonte, plano de fundo, tamanho, margens, etc.)
- Adsorção automática de componentes e guias em tempo real (os componentes podem ser automaticamente adsorvidos e alinhados com a tela, guias personalizadas e outros componentes, e exibir guias em tempo real. Pressione a tecla Alt enquanto arrasta para fechar temporariamente)
- Régua, linha de referência, linha de referência personalizável (clique na régua para gerar uma linha de referência, arraste a linha de referência para alterar sua posição, clique duas vezes para excluir a linha de referência)
- Desfazer, refazer (suporta teclas de atalho, número configurável de etapas de desfazer)
- Copiar, colar, bloquear, ocultar componentes, etc.
- ctrl + arraste componentes para copiar componentes rapidamente
- Menu do botão direito, o menu é configurável e pode ser gerado de forma flexível de acordo com o status atual do componente (ou seja, diferentes componentes podem gerar menus diferentes)
- O painel de camadas permite arrastar e soltar camadas de componentes, renomeá-las e bloquear, excluir e ocultar rapidamente componentes no painel de camadas.
- Selecione vários componentes ao mesmo tempo (pressione ctrl + clique esquerdo) para alinhar vários componentes
- O backup de dados é salvo localmente por meio do banco de dados indexDB (backup automático e backup manual estão disponíveis) e os dados podem ser restaurados a partir do backup.
- Gere código h5 com um clique
- Editar tamanho da tela
- Várias teclas de atalho
- Centro de configuração, você pode definir a função de desfazer, função de backup, etc.
- Existe um sistema de plug-ins para desenvolvedores, que pode ser usado para desenvolvimento secundário. Consulte pluginA no diretório de plug-ins.
