Biên tập viên TinyMCE "cổ điển" có hai Dropdowns: formatselectcho phong cách đoạn và styleselectcho phong cách nhân vật - mà cũng có thể chứa các kiểu đoạn văn, để làm cho nó khó hiểu hơn. Cấu hình trong WordPress theo mặc định chỉ hiển thị danh sách thả xuống định dạng . Nếu bạn áp dụng biểu định kiểu tùy chỉnh cho trình chỉnh sửa, TinyMCE có thể sử dụng nó để chọn tên lớp và thêm chúng vào danh sách thả xuống kiểu - nhưng điều này không hiệu quả với tôi.
Kể từ 3.0 bạn có thể gọi add_editor_style()trong của bạn functions.phpđể thêm một stylesheet để trình soạn thảo. Theo mặc định, nó editor-style.cssnằm trong thư mục chủ đề của bạn. Trước 3.0, bạn phải nối vào mce_cssbộ lọc để thêm URL vào biểu định kiểu trình soạn thảo của mình. Điều này sẽ kết thúc trong các content_cssgiá trị cấu hình TinyMCE .
Để thêm trình đơn thả xuống kiểu , styleselecttùy chọn phải xuất hiện trong một trong các mảng cấu hình thanh nút ( theme_advanced_buttons[1-4]trong TinyMCE, được lọc mce_buttons_[1-4]trong WordPress). Danh sách các định dạng khối được điều khiển bởi các theme_advanced_blockformatstùy chọn của TinyMCE , mà bạn có thể thêm vào các mảng kiểm soát trong các tiny_mce_before_initbộ lọc. Nếu bạn muốn tùy chỉnh tên của các kiểu thả xuống (không chỉ là tên lớp CSS của bạn), hãy nhìn vào các theme_advanced_stylestùy chọn . Bạn cũng có thể sử dụng style_formatstùy chọn nâng cao hơn giúp bạn linh hoạt hơn trong việc xác định kiểu.
Mã PHP có liên quan với tất cả các hook và cấu hình mặc định đang wp-admin/includes/post.phphoạt độngwp_tiny_mce() . Tất cả cùng nhau, thiết lập của bạn có thể trông như thế này:
add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
add_editor_style();
}
add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
$settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';
// From http://tinymce.moxiecode.com/examples/example_24.php
$style_formats = array(
array('title' => 'Bold text', 'inline' => 'b'),
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
array('title' => 'Table styles'),
array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
);
// Before 3.1 you needed a special trick to send this array to the configuration.
// See this post history for previous versions.
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}