NAS\NASPC
84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GrapesJS Editor cho S.I.S Cần Thơ</title>
|
|
|
|
<!-- GrapesJS Core -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/css/grapes.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.2/grapes.min.js"></script>
|
|
|
|
<!-- GrapesJS Preset Webpage (Giao diện chuẩn có sẵn các khối và nút Import/Export) -->
|
|
<link rel="stylesheet" href="https://unpkg.com/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css">
|
|
<script src="https://unpkg.com/grapesjs-preset-webpage"></script>
|
|
|
|
<!-- GrapesJS Blocks Basic -->
|
|
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
|
|
|
|
<style>
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
#gjs {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Trình soạn thảo GrapesJS sẽ hiển thị ở đây -->
|
|
<div id="gjs">
|
|
<h1>Chào mừng đến với Trình thiết kế S.I.S Cần Thơ</h1>
|
|
<p>Hãy bấm nút <b>Import (biểu tượng mũi tên đi xuống)</b> trên thanh công cụ, sau đó dán nội dung của file <code>grapesjs_import.html</code> vào đây để bắt đầu chỉnh sửa!</p>
|
|
</div>
|
|
|
|
<script>
|
|
const editor = grapesjs.init({
|
|
container: '#gjs',
|
|
height: '100vh',
|
|
width: 'auto',
|
|
storageManager: false, // Không lưu tạm vào LocalStorage để tránh rác
|
|
|
|
// ĐÂY LÀ CÁCH THÊM FILE CSS BÊN NGOÀI VÀO BẢNG VẼ GRAPESJS
|
|
canvas: {
|
|
styles: [
|
|
// Bạn có thể điền link CSS từ mạng (CDN)
|
|
// 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
|
|
|
|
// Hoặc dẫn link tới file CSS trên máy của bạn (lưu ý đường dẫn tương đối so với file editor.html)
|
|
// 'sisvietnamvn/src/main/resources/static/css/style.css'
|
|
],
|
|
scripts: [
|
|
// Bạn cũng có thể chèn file JS vào đây nếu cần
|
|
]
|
|
},
|
|
|
|
plugins: [
|
|
'gjs-preset-webpage',
|
|
'gjs-blocks-basic'
|
|
],
|
|
pluginsOpts: {
|
|
'gjs-preset-webpage': {
|
|
// Cấu hình các khối mở rộng
|
|
},
|
|
'gjs-blocks-basic': {
|
|
flexGrid: true
|
|
}
|
|
}
|
|
});
|
|
|
|
// Thêm tiếng Việt cho thân thiện (Tuỳ chọn)
|
|
editor.I18n.addMessages({
|
|
vi: {
|
|
assetManager: {
|
|
addButton: 'Thêm ảnh',
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|