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コードを生成
- キャンバスサイズを編集する
- 各種ショートカットキー
- 設定センターでは、アンドゥ機能やバックアップ機能などを設定できます。
- 二次開発に使用できる開発者向けのプラグイン システムがあります。plugins ディレクトリの pluginA を参照してください。
