H5-редактор
Визуальное управление, перетаскивание для создания страниц, экспорт html-файлов.
Он имеет систему подключаемых модулей редактора для разработчиков, поддерживает наследование от существующих проектов и поддерживает вторичную разработку.
H5-Editor — это чистый интерфейсный проект, разработанный на основе Vue2 и генерирующий страницы посредством перетаскивания, аналогично Yiqixiu, Baidu H5 и т. д.
Демо
Нажмите здесь, чтобы получить доступ к онлайн-демо
Использование
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 одним щелчком мыши
- Изменить размер холста
- Различные сочетания клавиш
- В центре настроек вы можете установить функцию отмены, функцию резервного копирования и т. д.
- Для разработчиков существует система плагинов, которую можно использовать для вторичной разработки. Обратитесь к плагину A в каталоге плагинов.
