feat: add Raw HTML, Accordion, and YouTube plugin support to the editor configuration
This commit is contained in:
+163
-112
@@ -1,7 +1,7 @@
|
||||
import json
|
||||
import oracledb
|
||||
|
||||
# Construct the Editor.js JSON structure using raw HTML blocks matching ckeditor5-layout schema
|
||||
# Construct the Editor.js JSON structure using our new structured 'grid' blocks
|
||||
json_data = {
|
||||
"time": 1700000000000,
|
||||
"blocks": [
|
||||
@@ -21,127 +21,178 @@ json_data = {
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "raw",
|
||||
"type": "grid",
|
||||
"data": {
|
||||
"html": """
|
||||
<section class="relative overflow-hidden xl:py-16 md:py-12 py-8">
|
||||
<div class="absolute top-0 right-0 w-1/2 h-full bg-primary-100 -skew-x-12 translate-x-1/4 z-0 opacity-50 hidden lg:block"></div>
|
||||
<div class="container relative z-10">
|
||||
<div class="ck-layout-columns" columns="2">
|
||||
<!-- Column 1 (Left): Text -->
|
||||
<div>
|
||||
<div class="relative">
|
||||
<div class="absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full"></div>
|
||||
<h2 class="display-3 text-primary-500 uppercase mb-4 block z-[1] relative">TẦM NHÌN</h2>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
|
||||
<p class="body-1 text-gray-800 text-justify !font-medium">Trở thành bệnh viện đại học dẫn đầu Việt Nam đạt chuẩn quốc tế</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column 2 (Right): Image -->
|
||||
<div>
|
||||
<div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
|
||||
<img alt="vision" src="/images/umass/mission.jpeg" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110" />
|
||||
</div>
|
||||
</div>
|
||||
"cols": 2,
|
||||
"type1": "html",
|
||||
"col1": """
|
||||
<div class="relative pt-4">
|
||||
<div class="absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full"></div>
|
||||
<h2 class="display-3 text-primary-500 uppercase mb-4 block z-[1] relative">TẦM NHÌN</h2>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
|
||||
<p class="body-1 text-gray-800 text-justify !font-medium">Trở thành bệnh viện đại học dẫn đầu Việt Nam đạt chuẩn quốc tế</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
""",
|
||||
"stretched": True
|
||||
"width1": 6,
|
||||
"class1": "relative z-10",
|
||||
"type2": "image",
|
||||
"col2": {
|
||||
"file": {
|
||||
"url": "/images/umass/mission.jpeg"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"width2": 6,
|
||||
"class2": "shadow-lg rounded"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "raw",
|
||||
"type": "grid",
|
||||
"data": {
|
||||
"html": """
|
||||
<section class="xl:py-16 md:py-12 py-8 bg-primary-500 text-white overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="ck-layout-columns" columns="2">
|
||||
<!-- Column 1 (Left): Image -->
|
||||
<div>
|
||||
<div class="relative h-full">
|
||||
<div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
|
||||
<img alt="mission" src="/images/umass/vision.jpeg" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column 2 (Right): Text -->
|
||||
<div>
|
||||
<div class="relative">
|
||||
<div class="absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-white/50 rounded-full"></div>
|
||||
<h2 class="display-3 text-white mb-4 relative z-[1]">SỨ MỆNH</h2>
|
||||
</div>
|
||||
<div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
|
||||
<p class="body-1 text-primary-500 text-justify !font-medium">Mang đến giải pháp chăm sóc sức khỏe tối ưu từ sự tích hợp giữa điều trị, nghiên cứu và đào tạo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"cols": 2,
|
||||
"type1": "image",
|
||||
"col1": {
|
||||
"file": {
|
||||
"url": "/images/umass/vision.jpeg"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"width1": 6,
|
||||
"class1": "shadow-lg rounded",
|
||||
"type2": "html",
|
||||
"col2": """
|
||||
<div class="relative pt-4">
|
||||
<div class="absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full"></div>
|
||||
<h2 class="display-3 text-primary-500 mb-4 relative z-[1]">SỨ MỆNH</h2>
|
||||
<div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
|
||||
<p class="body-1 text-primary-500 text-justify !font-medium">Mang đến giải pháp chăm sóc sức khỏe tối ưu từ sự tích hợp giữa điều trị, nghiên cứu và đào tạo</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
""",
|
||||
"stretched": True
|
||||
"width2": 6
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "raw",
|
||||
"type": "grid",
|
||||
"data": {
|
||||
"html": """
|
||||
<section class="bg-primary-75 py-12 overflow-hidden">
|
||||
<div class="container">
|
||||
<h2 class="text-center display-4 text-primary-600 xl:mb-6 md:mb-4 mb-3 uppercase">Giá trị cốt lõi</h2>
|
||||
|
||||
<div class="ck-layout-columns" columns="4">
|
||||
<!-- Column 1: Tiên phong -->
|
||||
<div class="p-3">
|
||||
<div class="rounded-lg shadow bg-primary-600 text-white p-4 h-full flex flex-col items-center text-center">
|
||||
<div class="mb-3">
|
||||
<img alt="Tiên phong" src="/images/career/core-hover-1.webp" style="width: 80px; height: 80px; object-fit: contain;" />
|
||||
</div>
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Tiên phong</h3>
|
||||
<p class="title-1">Phát triển và ứng dụng kỹ thuật tiên tiến vào điều trị, giảng dạy, nghiên cứu</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Thấu hiểu -->
|
||||
<div class="p-3">
|
||||
<div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
|
||||
<div class="mb-3">
|
||||
<img alt="Thấu hiểu" src="/images/career/core-2.webp" style="width: 80px; height: 80px; object-fit: contain;" />
|
||||
</div>
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Thấu hiểu</h3>
|
||||
<p class="title-1 text-gray-700">Nỗi đau thể xác và tinh thần của người bệnh để đưa ra giải pháp điều trị tối ưu</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Chuẩn mực -->
|
||||
<div class="p-3">
|
||||
<div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
|
||||
<div class="mb-3">
|
||||
<img alt="Chuẩn mực" src="/images/career/core-3.webp" style="width: 80px; height: 80px; object-fit: contain;" />
|
||||
</div>
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Chuẩn mực</h3>
|
||||
<p class="title-1 text-gray-700">Về y đức và học thuật của người thầy giáo – thầy thuốc</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: An toàn -->
|
||||
<div class="p-3">
|
||||
<div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
|
||||
<div class="mb-3">
|
||||
<img alt="An toàn" src="/images/career/core-4.webp" style="width: 80px; height: 80px; object-fit: contain;" />
|
||||
</div>
|
||||
<h3 class="heading-1 font-weight-bold mb-2">An toàn</h3>
|
||||
<p class="title-1 text-gray-700">Cho người bệnh, nhân viên y tế và cộng đồng</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
""",
|
||||
"stretched": True
|
||||
"cols": 4,
|
||||
"type1": "flex",
|
||||
"col1": {
|
||||
"cols": 2,
|
||||
"direction": "column",
|
||||
"justify": "center",
|
||||
"align": "center",
|
||||
"gap": "2",
|
||||
"type1": "image",
|
||||
"col1": {
|
||||
"file": {
|
||||
"url": "/images/career/core-hover-1.webp"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"type2": "html",
|
||||
"col2": """
|
||||
<div class="text-center">
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Tiên phong</h3>
|
||||
<p class="title-1">Phát triển và ứng dụng kỹ thuật tiên tiến vào điều trị, giảng dạy, nghiên cứu</p>
|
||||
</div>
|
||||
"""
|
||||
},
|
||||
"width1": 3,
|
||||
"class1": "rounded-lg shadow bg-primary-600 text-white p-4 h-full",
|
||||
"type2": "flex",
|
||||
"col2": {
|
||||
"cols": 2,
|
||||
"direction": "column",
|
||||
"justify": "center",
|
||||
"align": "center",
|
||||
"gap": "2",
|
||||
"type1": "image",
|
||||
"col1": {
|
||||
"file": {
|
||||
"url": "/images/career/core-2.webp"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"type2": "html",
|
||||
"col2": """
|
||||
<div class="text-center">
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Thấu hiểu</h3>
|
||||
<p class="title-1 text-gray-700">Nỗi đau thể xác và tinh thần của người bệnh để đưa ra giải pháp điều trị tối ưu</p>
|
||||
</div>
|
||||
"""
|
||||
},
|
||||
"width2": 3,
|
||||
"class2": "rounded-lg shadow bg-white text-primary-600 p-4 h-full border border-primary-100",
|
||||
"type3": "flex",
|
||||
"col3": {
|
||||
"cols": 2,
|
||||
"direction": "column",
|
||||
"justify": "center",
|
||||
"align": "center",
|
||||
"gap": "2",
|
||||
"type1": "image",
|
||||
"col1": {
|
||||
"file": {
|
||||
"url": "/images/career/core-3.webp"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"type2": "html",
|
||||
"col2": """
|
||||
<div class="text-center">
|
||||
<h3 class="heading-1 font-weight-bold mb-2">Chuẩn mực</h3>
|
||||
<p class="title-1 text-gray-700">Về y đức và học thuật của người thầy giáo – thầy thuốc</p>
|
||||
</div>
|
||||
"""
|
||||
},
|
||||
"width3": 3,
|
||||
"class3": "rounded-lg shadow bg-white text-primary-600 p-4 h-full border border-primary-100",
|
||||
"type4": "flex",
|
||||
"col4": {
|
||||
"cols": 2,
|
||||
"direction": "column",
|
||||
"justify": "center",
|
||||
"align": "center",
|
||||
"gap": "2",
|
||||
"type1": "image",
|
||||
"col1": {
|
||||
"file": {
|
||||
"url": "/images/career/core-4.webp"
|
||||
},
|
||||
"caption": "",
|
||||
"withBorder": False,
|
||||
"withBackground": False,
|
||||
"stretched": False
|
||||
},
|
||||
"type2": "html",
|
||||
"col2": """
|
||||
<div class="text-center">
|
||||
<h3 class="heading-1 font-weight-bold mb-2">An toàn</h3>
|
||||
<p class="title-1 text-gray-700">Cho người bệnh, nhân viên y tế và cộng đồng</p>
|
||||
</div>
|
||||
"""
|
||||
},
|
||||
"width4": 3,
|
||||
"class4": "rounded-lg shadow bg-white text-primary-600 p-4 h-full border border-primary-100"
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -153,15 +204,15 @@ json_string = json.dumps(json_data, ensure_ascii=False, indent=2)
|
||||
with open("tam_nhin_su_menh_import.json", "w", encoding="utf-8") as f:
|
||||
f.write(json_string)
|
||||
|
||||
print("Generated tam_nhin_su_menh_import.json successfully!")
|
||||
print("Generated structured tam_nhin_su_menh_import.json successfully using Grid block configurations!")
|
||||
|
||||
# Automatically attempt to update local Oracle Database
|
||||
# Automatically update Oracle Database
|
||||
try:
|
||||
conn = oracledb.connect(user='sisvietnam', password='sisvietnam', dsn='localhost:1521/sisvietnam')
|
||||
cursor = conn.cursor()
|
||||
cursor.execute("UPDATE sis_page SET content = :content WHERE slug = 'tam-nhin-su-menh-gia-tri-cot-loi'", content=json_string)
|
||||
conn.commit()
|
||||
print("Updated database table 'sis_page' for slug 'tam-nhin-su-menh-gia-tri-cot-loi' with layout JSON blocks!")
|
||||
print("Updated database table 'sis_page' for slug 'tam-nhin-su-menh-gia-tri-cot-loi' with structured Grid block layouts!")
|
||||
conn.close()
|
||||
except Exception as e:
|
||||
print("DB Update bypassed or failed:", e)
|
||||
print("DB Update failed:", e)
|
||||
|
||||
Reference in New Issue
Block a user