Tùy chọn content_css của TinyMCE không hỗ trợ lấy trực tiếp cả một folder. Nó chỉ chấp nhận danh sách các file CSS cụ thể (được chỉ định bằng đường dẫn tuyệt đối hoặc tương đối). Tuy nhiên, bạn có thể kết hợp các file CSS thành một file duy nhất hoặc chỉ định nhiều file một cách rõ ràng.
Nếu bạn chưa biết về tinymce thì có thể tham khảo bài: Tích hợp công cụ soạn thảo TinyMCE vào Laravel
Cách giải quyết:
1. Kết hợp các file CSS thành một file duy nhất
- Sử dụng công cụ như Webpack, Gulp, hoặc bất kỳ công cụ build nào để gộp tất cả CSS vào một file duy nhất.
- Chỉ định file gộp đó trong
content_css.
Ví dụ:
tinymce.init({
selector: 'textarea',
content_css: '/css/combined-styles.css', // File đã gộp
});
2. Liệt kê từng file CSS
Bạn có thể chỉ định nhiều file CSS bằng cách cung cấp danh sách file (phân tách bằng dấu phẩy).
Ví dụ:
tinymce.init({
selector: 'textarea',
content_css: [
'/css/reset.css',
'/css/editor-style.css',
'/css/theme-style.css'
],
});
3. Sử dụng backend để tự động gộp file
Nếu bạn muốn tự động lấy toàn bộ các file trong một folder CSS mà không liệt kê thủ công, bạn có thể xử lý việc này trên backend. Ví dụ:
- Với PHP, bạn có thể tạo một file
combined-css.phpnhư sau:
<?php
$folder = 'path/to/css/';
header("Content-type: text/css");
// Đọc tất cả file .css trong thư mục
foreach (glob($folder . "*.css") as $file) {
echo file_get_contents($file);
}
?>
- Sau đó, chỉ định file này trong
content_css:
tinymce.init({
selector: 'textarea',
content_css: '/path/to/combined-css.php',
});
4. Gợi ý sử dụng CDN hoặc Preprocessing
Nếu bạn không muốn tự quản lý việc gộp file, hãy sử dụng các dịch vụ CDN hoặc công cụ như SASS/LESS để tạo file CSS kết hợp trước khi đưa vào TinyMCE.
Nếu bạn cần hướng dẫn cụ thể hơn về cách triển khai, hãy cho mình biết môi trường bạn đang sử dụng (PHP, Node.js, v.v.) để hỗ trợ chi tiết nhé! 😊
