h5 editor

H5-Editor

可視化操作，拖曳生成頁面，匯出html文件

針對開發人員具有編輯器插件系統，支援和現有專案繼承，支援二次開發

H5-Editor是一個純前端項目，基於Vue2 開發、透過拖曳產生頁面，類似易企秀、百度H5等

Demo

點此前往線上demo

Usage

git clone https://github.com/a7650/h5-editor.git

cd h5-editor

#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境

npm install

npm run dev

技術堆疊

主要基於Vue2，Element-ui（部分使用），Vuex

編輯器主要功能

• 元素自由拖曳，放大，縮小，旋轉
• 可添加圖片，文本，矩形，背景。多種編輯功能（字體，背景，大小，邊距等）
• 組件自動吸附，即時參考線（組件可以和畫布，自訂參考線以及其他組件進行自動吸附對齊，並顯示即時參考線，拖曳過程中按下alt鍵可暫時關閉）
• 標尺，參考線，可自訂參考線（在標尺上點選即可產生參開線，可拖曳參考線變更位置，雙擊刪除參考線）
• 撤銷，重做（支援快捷鍵，可設定撤銷的步數）
• 組件複製，貼上，鎖定，隱藏等
• ctrl + 拖曳組件可快速複製組件
• 右鍵選單，選單可配置，可針對元件目前狀態靈活產生（即不同的元件可產生不同的選單）
• 圖層面板，可拖曳更改組件圖層，可重新命名，可在圖層面板快速鎖定，刪除，隱藏組件
• 同時選取多元件（按ctrl + 左鍵），可進行多元件對齊
• 資料備份，透過indexDB資料庫保存在本地（可自動備份，手動備份），並可從備份中恢復數據
• 一鍵產生h5程式碼
• 編輯畫布大小
• 多種快速鍵
• 設定中心，可設定撤銷功能，備份功能等
• 針對開發人員具有插件系統，可透過插件系統二次開發，可參考plugins目錄下的pluginA