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


    
    iframe class="hura-main-content" id="js-hura-iframe" src="{// Url giao diện \\}"
    <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(); </script> // => Cài đặt
<!-- // 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

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

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


    
    
        Trang chủ
        Bảo hành
        Liên hệ
    
    
        1. Quý khách cần đăng nhập Thông tin chính xác để quay thưởng.
        2. Mỗi khách hàng được quay 5 lần và chỉ được chọn 1 phần quà.
        3. Mã giảm giá sử dụng trong vòng 15 ngày kể từ ngày nhận thưởng.
        4. Voucher được phát hành và áp dụng đến khi hết số lượng.

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

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


    
        STT Khách hàng Giải thưởng Thời gian
1 ***ngoc@gmail.com Voucher 100K 15-Mar-2023 9:43