TinyMCE: thêm CSS vào định dạng thả xuống

Tôi đã thêm thành công biểu định kiểu TinyMCE bằng add_editor_style () để tôi có thể xem trước các kiểu trong phần thân của trình soạn thảo TinyMCE.

Tuy nhiên, tôi có đúng không khi cho rằng hàm add_editor_style () chỉ có thể truy cập kiểu cho phần thân của trình soạn thảo?

Nếu vậy, có một phương pháp hoặc chức năng nào khác mà tôi có thể sử dụng để truy cập vào kiểu dáng của trình đơn thả xuống Định dạng TinyMCE không?

Bạn không thể nâng cao danh sách thả xuống formatselect. Nhưng bạn có thể nâng cao với hook tiny_mce_before_initthứ hai thả xuống styleselect, có ẩn trong cài đặt WordPress mặc định. Các tài liệu liệt kê tất cả các mặc định và khả năng.

• nội tuyến - Tên của phần tử nội tuyến để sản xuất ví dụ như nhịp span. Lựa chọn văn bản hiện tại sẽ được gói trong phần tử nội tuyến này.
• khối - Tên của phần tử khối sẽ tạo ra ví dụ: h h1. Các phần tử khối hiện có trong lựa chọn được thay thế bằng phần tử khối mới.
• bộ chọn - Mẫu bộ chọn CSS 3 để tìm các phần tử trong vùng chọn bằng cách. Điều này có thể được sử dụng để áp dụng các lớp cho các phần tử cụ thể hoặc những thứ phức tạp như các hàng lẻ trong một bảng.
• các lớp - Danh sách các lớp được phân tách bằng dấu cách để áp dụng các phần tử được chọn hoặc phần tử nội tuyến / khối mới.
• kiểu - Đối tượng tên / giá trị với các mục tyle CSS để áp dụng, chẳng hạn như màu, v.v.
• thuộc tính - Đối tượng tên / giá trị với các thuộc tính để áp dụng cho các thành phần được chọn hoặc thành phần nội tuyến / khối mới.
• chính xác - Tắt tính năng hợp nhất kiểu tương tự khi sử dụng. Điều này là cần thiết cho một số vấn đề kế thừa CSS như trang trí văn bản cho gạch chân / gạch ngang.
• trình bao bọc - Trạng thái cho biết định dạng hiện tại là định dạng chứa cho các thành phần khối. Ví dụ: trình bao bọc div hoặc blockquote.

Nút Kiểu

Lưu ý rằng, theo mặc định, danh sách thả xuống Kiểu được ẩn trong WordPress. Đầu tiên, thêm nút cho các định dạng tùy chỉnh vào thanh menu của TinyMCE, ví dụ dòng 2 có hook mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Các kiểu tùy chỉnh

Sau đó tăng cường thả xuống của nút này. Aslo hữu ích cho sự phát triển thông qua giá trị bổ sung trong mảng, xem codex cho ví dụ này.

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Kết quả

Menu thả xuống nâng cao

Bạn cũng có thể tăng cường thả xuống với một menu cây. Tạo var từ nguồn ví dụ ở trên với cấu trúc nhiều hơn trong mảng, như nguồn theo sau.

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

Để biết thêm các khả năng và tham số, hãy xem các giá trị mặc định của trường thả xuống Định dạng kiểu (viết bằng javascript).

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

Thêm biểu định kiểu tùy chỉnh vào trình chỉnh sửa

Bây giờ là điểm cuối cùng, mà bạn bao gồm css tùy chỉnh cho các định dạng này, thông qua hook mce_css.

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

Đừng quên thêm quy tắc biểu định kiểu này vào biểu định kiểu giao diện người dùng.

Xóa nút định dạng

Khi nâng cao, bạn có thể loại bỏ nút formatselectthả xuống thông qua kiểm tra giá trị trong mảng nút. Thêm nguồn theo dõi vào chức năng fb_mce_editor_buttonstại hook mce_buttons_2.

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

Mỗi câu trả lời này , chìa khóa để nhận được phong cách xuất hiện trong danh sách thả xuống làunset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

Rất hữu ích và cảm ơn cho defaultstylescon trỏ. Tôi thấy các mảng hợp nhất không hoạt động cho đến khi chuyển đổi các tùy chọn mặc định đó thành JSON hợp lệ (không phải JavaScript hợp lệ). Dưới đây cho phép nối thêm trình đơn thả xuống của tinymce WordPress thay vì thay thế

Tùy chọn mặc định (JSON):

$defaults = '[{ "title": "Headers", "items": [
        { "title": "Header 1", "format": "h1" },
        { "title": "Header 2", "format": "h2" },
        { "title": "Header 3", "format": "h3" },
        { "title": "Header 4", "format": "h4" },
        { "title": "Header 5", "format": "h5" },
        { "title": "Header 6", "format": "h6" }
    ] },

    { "title": "Inline", "items": [
        { "title": "Bold", "icon": "bold", "format": "bold" },
        { "title": "Italic", "icon": "italic", "format": "italic" },
        { "title": "Underline", "icon": "underline", "format": "underline" },
        { "title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough" },
        { "title": "Superscript", "icon": "superscript", "format": "superscript" },
        { "title": "Subscript", "icon": "subscript", "format": "subscript" },
        { "title": "Code", "icon": "code", "format": "code" }
    ] },

    { "title": "Blocks", "items": [
        { "title": "Paragraph", "format": "p" },
        { "title": "Blockquote", "format": "blockquote" },
        { "title": "Div", "format": "div" },
        { "title": "Pre", "format": "pre" }
    ] },

    { "title": "Alignment", "items": [
        { "title": "Left", "icon": "alignleft", "format": "alignleft" },
        { "title": "Center", "icon": "aligncenter", "format": "aligncenter" },
        { "title": "Right", "icon": "alignright", "format": "alignright" },
        { "title": "Justify", "icon": "alignjustify", "format": "alignjustify" }
        ] }
 ]'; 

Trong hàm.php trả về hàm băm tùy chọn lớn hơn:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}