H5-에디터
시각적 작업, 드래그 앤 드롭으로 페이지 생성, HTML 파일 내보내기
개발자를 위한 편집기 플러그인 시스템이 있으며 기존 프로젝트의 상속을 지원하고 2차 개발을 지원합니다.
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 코드 생성
- 캔버스 크기 편집
- 다양한 단축키
- 설정센터에서는 실행 취소 기능, 백업 기능 등을 설정할 수 있습니다.
- 2차 개발에 사용할 수 있는 개발자용 플러그인 시스템이 있습니다. 플러그인 디렉토리의 플러그인A를 참조하세요.
