Cài đặt
Tệp#
| Tệp | Định dạng | URL |
|---|---|---|
math-canvas.js |
UMD | https://geogebra.vietify.vn/embed/math-canvas.js |
math-canvas.mjs |
ESM | https://geogebra.vietify.vn/embed/math-canvas.mjs |
math-canvas.css |
CSS | https://geogebra.vietify.vn/embed/math-canvas.css |
UMD và ESM nhúng sẵn CSS, tự chèn thẻ <style> khi chạy. math-canvas.css
dành cho trường hợp CSS phải nạp tách rời.
UMD#
<script src="https://geogebra.vietify.vn/embed/math-canvas.js"></script>
Tạo biến toàn cục MathCanvas.
ESM#
import MathCanvas, { init, parseDocument } from 'https://geogebra.vietify.vn/embed/math-canvas.mjs';
Thuộc tính HTML#
Phần tử mang data-math-canvas được khởi tạo khi DOMContentLoaded.
<div data-math-canvas data-height="420" data-canvas-bg="white"></div>
| Thuộc tính | Tuỳ chọn |
|---|---|
data-document |
document (chuỗi JSON) |
data-height, data-width |
height, width |
data-storage-key |
storageKey |
data-canvas-bg |
canvasBg |
data-auto-label |
autoLabel |
data-show-hints |
showHints |
data-keyboard |
keyboard |
data-auto-focus |
autoFocus |
data-fonts |
fonts |
MathCanvas.initAll() quét lại; phần tử đã có thực thể được bỏ qua.
Yêu cầu môi trường#
| Mục | Giá trị |
|---|---|
| Mã hoá tài liệu | UTF-8 |
style-src |
'unsafe-inline' |
img-src |
data: |
style-src, font-src |
fonts.googleapis.com, fonts.gstatic.com — chỉ khi fonts bật |
| API trình duyệt | ResizeObserver, Pointer Events, :where() |
Gói chứa chuỗi UTF-8; thẻ <script> giải mã theo mã hoá của tài liệu nhúng nó.
Với { fonts: false }, gói không phát sinh yêu cầu mạng nào.
React 19 nằm trong gói, độc lập với React của tài liệu chủ.