Với Drupal, bạn có nhiều lựa chọn để tạo ra các giao diện đa dạng. Tuy nhiên, nếu muốn đơn giản hóa, bạn có thể sử dụng các theme tích hợp sẵn thư viện CSS, ví dụ như Bootstrap, một thư viện rất phổ biến hiện nay. Bootstrap giúp giảm bớt công sức viết CSS, đồng thời cung cấp nhiều mẫu theme sẵn có trên mạng, dễ dàng tải về và tích hợp vào website.
Các module hỗ trợ CKEditor5 và Bootstrap thường dùng trong doanh nghiệp:
- CKEditor5 Template
Cung cấp các mẫu giao diện sẵn cho Bootstrap, giúp tạo bài viết nhanh chóng. - CKEditor Insert Blocks
Cho phép chèn các khối nội dung (content block, view block, custom module block) đã tạo sẵn vào bài viết. - Linkit
Hỗ trợ thêm liên kết vào nội dung một cách dễ dàng. - Menu Bootstrap Icon
Thêm các biểu tượng Bootstrap vào bài viết, làm nội dung sinh động hơn. - Date iCal
Tích hợp lịch sự kiện, cho phép người dùng tải về dưới dạng file.ics. - CKEditor5 Bootstrap Accordion
Tạo các tab hoặc accordion trong bài viết. - Sign Widget
Cho phép người dùng ký tên trực tiếp trong trình soạn thảo, phù hợp cho biểu mẫu hoặc bài viết yêu cầu xác nhận. - Screenshot
Hữu ích để chụp màn hình và thêm ghi chú trực tiếp vào bài viết, phù hợp cho báo cáo lỗi nội bộ. - Postlight Parser
Module này tự động trích xuất nội dung và hình ảnh từ các liên kết bài viết trên internet, hỗ trợ đưa nội dung về hệ thống nội bộ.
Những công cụ này giúp tăng hiệu quả trong việc soạn thảo nội dung và quản lý giao diện, đồng thời tối ưu hóa trải nghiệm người dùng trên website Drupal.
Cài đặt.
composer require drupal/bootstrap5_admin drupal/ckeditor5_template drupal/ckeditor_insert_blocks drupal/linkit drupal/menu_bootstrap_icon drupal/date_ical drupal/ckeditor5_bootstrap_accordion drupal/sign_widget drupal/screenshot
Bật giao diện bootstrap lên ở menu Hình thức /admin/appearance bạn đừng quên chọn ờ Giao diện quản trị là bootstrap
Sau khi bật bootstrap bạn có thể thiết lập một số mặc định ở trong ờ thêm của bootstrap ờ tùy theo sở thích của bạn.
Phần sub theme cho phép bạn có thể tạo một giao diện con mới phụ thuộc vào theme cha bootstrap 5 admin để có thể chỉnh sửa cao hơn, nhưng mình sẽ nói ở một bài viết sau
Bây giờ mình sẽ tiến hành thêm 1 số các tiện ích cho CkEditor nó có khá nhiều module hỗ trợ bạn có thể dễ dàng tìm thấy trên kho module của drupal. Với mình đây là một số module mà mình tạo ra vì trong doanh nghiệp thường hay sử dụng.
Bật các modules hổ trợ ckEditor5 với drush./vendor/drush/drush/drush en -y ckeditor5_template ckeditor_insert_blocks linkit menu_bootstrap_icon date_ical ckeditor5_bootstrap_accordion sign_widget screenshot
Bật các nút trong cấu hình của ckEditor tron Cấu hình > Biên soạn nội dung > Text formats and editors /admin/config/content/formats
Sau khi kéo các button xuống Active toolbar, bạn đừng quên vào phần mẫu và thay thế tên template file location= /themes/contrib/bootstrap5_admin/templates/ckeditor5_template.json
ví dụ với cái nút thêm mẫu bạn có thể lựa chọn rất là nhiều mẫu bootstrap 5 đã được ờ thiết lập sẳn. Sau khi chọn mẫu bạn chỉ việc chỉnh sửa nội dung của mẫu đó vừa nhanh và vừa đẹp mắt.