Giao diện
@digiforce-nc/plugin-block-iframe
Plugin nhúng nội dung bên ngoài vào trang ứng dụng thông qua iframe - hỗ trợ hai chế độ: nhúng URL bên ngoài và lưu/render HTML trực tiếp từ database.
Plugin này làm gì?
Trong nhiều tình huống, bạn cần nhúng một trang web bên ngoài (dashboard Grafana, biểu mẫu Google, trang wiki) hoặc viết đoạn HTML tùy chỉnh ngay trong ứng dụng. Plugin iframe cung cấp cả hai chế độ này với server-side lưu trữ HTML an toàn.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Nhúng URL bên ngoài | Render iframe trỏ đến URL tùy ý, hỗ trợ biến động trong URL |
| 2 | Lưu & render HTML | Lưu HTML vào database, trả về raw HTML qua action riêng |
| 3 | Kiểm soát truy cập | ACL yêu cầu đăng nhập để đọc HTML, snippet ui.iframeHtml |
Kiến trúc
Tổng quan
Plugin có cả server (lưu HTML, cung cấp API) và client (render iframe, code editor):
| Tầng | Vai trò | Thành phần |
|---|---|---|
| Client UI | Render iframe, chỉnh sửa HTML | IframeBlockWidget, CodeEditor |
| Server API | Lưu trữ và trả HTML | Action iframeHtml:getHtml |
| Database | Lưu trữ nội dung HTML | Collection iframeHtml |
Hai chế độ hoạt động
| Chế độ | Cách hoạt động | Dữ liệu |
|---|---|---|
| URL mode | Iframe nhúng trực tiếp URL bên ngoài | URL lưu trong schema props |
| HTML mode | Gọi API lấy HTML, render trong iframe sandbox | HTML lưu trong bảng iframeHtml |
API endpoints
| Endpoint | Method | Mô tả | ACL |
|---|---|---|---|
iframeHtml:getHtml | GET | Trả về raw HTML content theo id | loggedIn |
iframeHtml:create | POST | Tạo bản ghi HTML mới | loggedIn |
iframeHtml:update | PUT | Cập nhật nội dung HTML | loggedIn |
Luồng HTML mode
Database
Plugin tạo một collection duy nhất:
Bảng iframeHtml
| Cột | Kiểu | Mô tả |
|---|---|---|
id | uid (PK) | Định danh duy nhất |
html | text | Nội dung HTML đầy đủ |
Phân quyền (ACL)
| Tài nguyên | Quyền | Điều kiện |
|---|---|---|
iframeHtml:getHtml | Đọc HTML | Yêu cầu loggedIn |
iframeHtml:create | Tạo HTML | Yêu cầu loggedIn |
iframeHtml:update | Sửa HTML | Yêu cầu loggedIn |
Snippet ui.iframeHtml | Hiển thị block | Snippet ACL |
Tính năng
| Tính năng | Mô tả |
|---|---|
| URL mode | Nhúng bất kỳ URL bên ngoài nào qua iframe |
| HTML mode | Viết HTML tùy chỉnh, lưu server-side |
| CodeEditor | Trình soạn thảo code với syntax highlighting |
| Sandbox | HTML render trong iframe sandbox để cách ly |
| Biến động URL | Hỗ trợ biến trong URL (record id, user info) |
| Responsive | Iframe tự co giãn theo container |
Thành phần client
| Thành phần | Mô tả |
|---|---|
IframeBlockWidget | Widget chính đăng ký block iframe vào hệ thống |
IframeBlockProvider | Provider quản lý state (mode, url, html content) |
IframeBlockComponent | Component render iframe với URL hoặc HTML |
CodeEditor | Component code editor cho chế độ HTML |
IframeDesigner | Designer cho phép chuyển mode, cấu hình URL/HTML |
IframeBlockInitializer | Đăng ký vào menu "Add block" |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework (peer) |
@digiforce-nc/server | Server framework (peer) |
@digiforce-nc/database | Database ORM cho collection iframeHtml (peer) |
react-iframe | Component React render iframe |