Trong file giao diện, để hiển thị thanh công cụ chỉnh sửa cần có class="js-hura-edit" và data-hura-type="{{type}}" tương ứng. Trường hợp chỉ có 1 trong 2 yêu cầu trên sẽ không hiển thị thanh công cụ

Kỹ thuật khi cắt HTML + CSS đặt class và type cho thẻ muốn chỉnh sửa

1. Cài đặt


/* 1. index.html */
<iframe class="hura-main-content" id="js-hura-iframe" src="{// Url giao diện \\}"></iframe>

<script src="js/hura_edit.js"></script> => // code edit template

<script src="js/jscolor.js"></script> => // Bảng mã màu

<script>
    Hura_Edit.install(); // => Cài đặt
</script>


/* 2. file giao diện. Các file dưới sẽ được thêm vào iframe. Function cài đặt Hura_Edit.Iframe.iframe_Setup() */
<link rel="stylesheet" href="css/style.css"/> 
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"> </script> => // Thư viện kéo/thả

2. Quy định

Danh sách Class, Attribute được sử dụng

class="js-hura-edit": Khi Hover, Click, dbclick thẻ HTML nào chứa class này sẽ kiểm tra thuộc tính data-hura-type="{{ type }}" và hiển thị thanh công cụ (toolbar) tương ứng
data-hura-type="{{ type }}" : Kiểu giao diện được edit. Dưới đây là danh sách type được sử dụng cho giao diện Mini Game
- file : Dùng thay thế file logo, banner
- text : Dùng chỉnh sửa HTML là text (Nếu thẻ được chọn là thẻ thì sẽ có thêm lựa chọn: sửa URL, Mở tab mới)
- wheel : Dùng cài đặt vòng quay (Thêm, sửa, xóa)
- reward : Dùng cho mục khách trúng thưởng (Ẩn/Hiện các cột trong bảng)
class="js-hura-drag" : Dùng để kéo/thả. Đặt ở thẻ HTML ngoài, các thành phần con gần nhất bên trong class này sẽ cho phép đổi vị trí của thành phần khác

2.1 Hướng dẫn đặt html chỉnh sửa giao diện

VD 1: Đổi ảnh hoặc banner sẽ dùng data-hura-type="file"


<!-- // Logo -->
<a class="js-hura-edit" data-hura-type="file">
    <img src="https://aman.gleecdn.com/file/1/tl/TL1MzbLUhPQoaGI.png" alt="logo">
</a>

<!-- // Banner -->
<div class="js-hura-edit" data-hura-type="file">
    <img src="https://aman.gleecdn.com/file/1/fo/fOE3m0gpFuzy7LU.jpg" alt="banner">
</div>

VD 2: Sửa Text sẽ dùng data-hura-type="text"


<div class="js-hura-edit" data-hura-type="text">
    <a target="_blank" href="https://demxanh.com/">Trang chủ</a>
    <a target="_blank" href="https://demxanh.com/chinh-sach-bao-hanh.html"><span>Bảo hành</span></a>
    <a target="_blank" href="https://demxanh.com/lien-he.html">Liên hệ</a>
</div>

<div class="js-hura-edit" data-hura-type="text">
    <p>1. Quý khách cần đăng nhập Thông tin chính xác để quay thưởng.</p>
    <p>2. Mỗi khách hàng được quay 5 lần và chỉ được chọn 1 phần quà.</p>
    <p>3. Mã giảm giá sử dụng trong vòng 15 ngày kể từ ngày nhận thưởng.</p>
    <p>4. Voucher được phát hành và áp dụng đến khi hết số lượng.</p>
</div>

VD 3: Sửa Vòng quay sẽ dùng data-hura-type="wheel"


<div class="js-hura-edit" data-hura-type="wheel">
    <canvas id="canvas"></canvas>
</div>

VD 4: Sửa Bảng trúng thưởng sẽ dùng data-hura-type="reward"


<div class="js-hura-edit" data-hura-type="reward" style="padding: 4px;">
    <div id="js-recent-winners"><table class="text-14 text-12-mb w-100"><thead><tr><th>STT</th><th>Khách hàng</th><th>Giải thưởng</th><th>Thời gian</th></tr></thead><tbody><tr><td>1</td><td>***ngoc@gmail.com</td><td>Voucher 100K</td><td>15-Mar-2023 9:43</td></tr></table></div>
</div>

2.2 Hướng dẫn đặt thẻ html cho kéo/thả

Để kéo/thả cần bọc thẻ html cha bằng class="js-hura-drag". Các thẻ html cấp gần nhất với class sẽ được phép kéo/thả trong class đó.

VD: Các thẻ <a> bên trong class="js-hura-drag" sẽ được kéo đến vị trí khác trong class


<div class="js-hura-edit js-hura-drag" data-hura-type="text">
    <a target="_blank" href="https://demxanh.com/" class="item">Trang chủ</a>
    <a target="_blank" href="https://demxanh.com/chinh-sach-bao-hanh.html" class="item"><span>Bảo hành</span></a>
    <a target="_blank" href="https://demxanh.com/lien-he.html" class="item">Liên hệ</a>
</div>