Khi tìm kiếm giải pháp, tôi đã tìm thấy plugin để cho phép thả xuống các kiểu CSS đã có trong biểu định kiểu. Điều tôi muốn là cho phép trình soạn thảo thêm Lớp CSS từ hộp văn bản. Vì vậy, nếu bạn xem xét hình ảnh này:
Điều tôi lý tưởng tìm kiếm là một cách để có được một hộp văn bản khác trong đó bên dưới Tiêu đề gọi là Lớp . Sự tự do để nhập một lớp CSS là cần thiết cho các chức năng khác trong trang web. Bất kỳ ý tưởng về làm thế nào tôi có thể đạt được điều này?
Cảm ơn nhiều!
Câu trả lời:
Một tùy chọn là thêm một lớp vào menu Styleselect trong MCE. Được điều chỉnh từ trang Codex "TinyMCE Custom Styles" trước tiên bạn cần thêm kiểu chọn vào trình chỉnh sửa:
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');Điều đó sẽ thêm trình đơn mới thả xuống trình chỉnh sửa. Sau đó, bạn tạo kiểu tùy chỉnh của mình:
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'My Link Custom Class',
'selector' => 'a',
'classes' => 'my-custom-link-class'
)
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );Kể từ WordPress 3.9 bao gồm nâng cấp lên TinyMCE 4.0, kiểu chọn mạnh mẽ hơn nhiều và bao gồm selectorquy tắc đó có nghĩa là bạn có thể xác định các kiểu chỉ có thể áp dụng cho các liên kết. Nó khá đẹp.
Giải pháp này có nghĩa là bạn có thể xác định trước các lớp bạn cần và đảm bảo không bao giờ có lỗi chính tả hoặc các vấn đề khác.
Như Codex lưu ý, điều này được kết hợp tốt nhất với một editor-style.csstệp tốt sẽ áp dụng các kiểu của bạn trực tiếp trong trình chỉnh sửa.
var_dump()ing $init_arraytrên và xem những gì ở đó. Hãy nhớ rằng bản cập nhật TinyMCE 4.0 trong WordPress 3.9 đã khiến rất nhiều hướng dẫn và tài liệu hiện có bị sai. Kiểm tra ngày khi nghiên cứu.
formatselectvà chuyển hoàn toàn sang styleselecttất cả các thành phần khối và kiểu văn bản.
Tôi đã có thể giải quyết điều này bằng cách thêm plugin WP Edit vào trang web của mình. Nó có nút Liên kết nâng cao , cho phép tôi (hoặc trình chỉnh sửa) nhập thủ công tên lớp.