feat: add Raw HTML, Accordion, and YouTube plugin support to the editor configuration

This commit is contained in:
2026-08-01 11:53:28 +07:00
parent 4bf6e82f82
commit 2a8c6bfc39
10 changed files with 825 additions and 197 deletions
+158 -9
View File
@@ -2,24 +2,173 @@
"time": 1700000000000,
"blocks": [
{
"type": "raw",
"type": "stickyNav",
"data": {
"html": "\n<section class=\"relative overflow-hidden xl:py-16 md:py-12 py-8\">\n <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>\n <div class=\"container relative z-10\">\n <div class=\"ck-layout-columns\" columns=\"2\">\n <!-- Column 1 (Left): Text -->\n <div>\n <div class=\"relative\">\n <div class=\"absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full\"></div>\n <h2 class=\"display-3 text-primary-500 uppercase mb-4 block z-[1] relative\">TẦM NHÌN</h2>\n <div class=\"flex flex-col space-y-4\">\n <div class=\"bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow\">\n <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>\n </div>\n </div>\n </div>\n </div>\n <!-- Column 2 (Right): Image -->\n <div>\n <div class=\"relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg\">\n <img alt=\"vision\" src=\"/images/umass/mission.jpeg\" class=\"w-full h-full object-cover transition-transform duration-700 hover:scale-110\" />\n </div>\n </div>\n </div>\n </div>\n</section>\n",
"stretched": true
"title": "Tầm nhìn - Sứ mệnh",
"bgColor": "#ffffff",
"items": [
{
"label": "Giới thiệu tổng quan",
"link": "/page/gioi-thieu-tong-quan"
},
{
"label": "Lịch sử hình thành",
"link": "/page/lich-su-hinh-thanh"
},
{
"label": "Tầm nhìn - Sứ mệnh - Giá trị cốt lõi",
"link": "/page/tam-nhin-su-menh-gia-tri-cot-loi"
},
{
"label": "Ban lãnh đạo",
"link": "/page/doi-ngu-lanh-dao"
},
{
"label": "Các đơn vị",
"link": "/page/cac-don-vi"
},
{
"label": "Thành tựu và giải thưởng",
"link": "/page/thanh-tuu-va-giai-thuong"
}
]
}
},
{
"type": "raw",
"type": "grid",
"data": {
"html": "\n<section class=\"xl:py-16 md:py-12 py-8 bg-primary-500 text-white overflow-hidden\">\n <div class=\"container\">\n <div class=\"ck-layout-columns\" columns=\"2\">\n <!-- Column 1 (Left): Image -->\n <div>\n <div class=\"relative h-full\">\n <div class=\"relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg\">\n <img alt=\"mission\" src=\"/images/umass/vision.jpeg\" class=\"w-full h-full object-cover\" />\n </div>\n </div>\n </div>\n <!-- Column 2 (Right): Text -->\n <div>\n <div class=\"relative\">\n <div class=\"absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-white/50 rounded-full\"></div>\n <h2 class=\"display-3 text-white mb-4 relative z-[1]\">SỨ MỆNH</h2>\n </div>\n <div class=\"bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow\">\n <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>\n </div>\n </div>\n </div>\n </div>\n</section>\n",
"stretched": true
"cols": 2,
"type1": "html",
"col1": "\n<div class=\"relative pt-4\">\n <div class=\"absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full\"></div>\n <h2 class=\"display-3 text-primary-500 uppercase mb-4 block z-[1] relative\">TẦM NHÌN</h2>\n <div class=\"flex flex-col space-y-4\">\n <div class=\"bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow\">\n <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>\n </div>\n </div>\n</div>\n",
"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": "\n<section class=\"bg-primary-75 py-12 overflow-hidden\">\n <div class=\"container\">\n <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>\n \n <div class=\"ck-layout-columns\" columns=\"4\">\n <!-- Column 1: Tiên phong -->\n <div class=\"p-3\">\n <div class=\"rounded-lg shadow bg-primary-600 text-white p-4 h-full flex flex-col items-center text-center\">\n <div class=\"mb-3\">\n <img alt=\"Tiên phong\" src=\"/images/career/core-hover-1.webp\" style=\"width: 80px; height: 80px; object-fit: contain;\" />\n </div>\n <h3 class=\"heading-1 font-weight-bold mb-2\">Tiên phong</h3>\n <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>\n </div>\n </div>\n \n <!-- Column 2: Thấu hiểu -->\n <div class=\"p-3\">\n <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\">\n <div class=\"mb-3\">\n <img alt=\"Thấu hiểu\" src=\"/images/career/core-2.webp\" style=\"width: 80px; height: 80px; object-fit: contain;\" />\n </div>\n <h3 class=\"heading-1 font-weight-bold mb-2\">Thấu hiểu</h3>\n <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>\n </div>\n </div>\n \n <!-- Column 3: Chuẩn mực -->\n <div class=\"p-3\">\n <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\">\n <div class=\"mb-3\">\n <img alt=\"Chuẩn mực\" src=\"/images/career/core-3.webp\" style=\"width: 80px; height: 80px; object-fit: contain;\" />\n </div>\n <h3 class=\"heading-1 font-weight-bold mb-2\">Chuẩn mực</h3>\n <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>\n </div>\n </div>\n \n <!-- Column 4: An toàn -->\n <div class=\"p-3\">\n <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\">\n <div class=\"mb-3\">\n <img alt=\"An toàn\" src=\"/images/career/core-4.webp\" style=\"width: 80px; height: 80px; object-fit: contain;\" />\n </div>\n <h3 class=\"heading-1 font-weight-bold mb-2\">An toàn</h3>\n <p class=\"title-1 text-gray-700\">Cho người bệnh, nhân viên y tế và cộng đồng</p>\n </div>\n </div>\n </div>\n </div>\n</section>\n",
"stretched": true
"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": "\n<div class=\"relative pt-4\">\n <div class=\"absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full\"></div>\n <h2 class=\"display-3 text-primary-500 mb-4 relative z-[1]\">SỨ MỆNH</h2>\n <div class=\"bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow\">\n <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>\n </div>\n</div>\n",
"width2": 6
}
},
{
"type": "grid",
"data": {
"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": "\n<div class=\"text-center\">\n <h3 class=\"heading-1 font-weight-bold mb-2\">Tiên phong</h3>\n <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>\n</div>\n"
},
"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": "\n<div class=\"text-center\">\n <h3 class=\"heading-1 font-weight-bold mb-2\">Thấu hiểu</h3>\n <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>\n</div>\n"
},
"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": "\n<div class=\"text-center\">\n <h3 class=\"heading-1 font-weight-bold mb-2\">Chuẩn mực</h3>\n <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>\n</div>\n"
},
"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": "\n<div class=\"text-center\">\n <h3 class=\"heading-1 font-weight-bold mb-2\">An toàn</h3>\n <p class=\"title-1 text-gray-700\">Cho người bệnh, nhân viên y tế và cộng đồng</p>\n</div>\n"
},
"width4": 3,
"class4": "rounded-lg shadow bg-white text-primary-600 p-4 h-full border border-primary-100"
}
}
],