TinyMCE: การเพิ่ม CSS เพื่อจัดรูปแบบแบบเลื่อนลง

ฉันเพิ่มสไตล์ชีท TinyMCE สำเร็จโดยใช้ add_editor_style () เพื่อให้ฉันสามารถดูตัวอย่างสไตล์ในเนื้อความของตัวแก้ไข TinyMCE

อย่างไรก็ตามฉันคิดถูกต้องหรือไม่ว่าฟังก์ชัน add_editor_style () สามารถเข้าถึงสไตล์สำหรับเนื้อความของตัวแก้ไขได้เท่านั้น

ถ้าเป็นเช่นนั้นจะมีวิธีหรือฟังก์ชั่นอื่นที่ฉันสามารถใช้เพื่อเข้าถึงสไตล์ของดรอปดาวน์รูปแบบ TinyMCE หรือไม่

formatselectคุณไม่สามารถเพิ่มรายการแบบหล่นลง แต่คุณสามารถเพิ่มประสิทธิภาพด้วยเบ็ดtiny_mce_before_initตกที่สองstyleselectมีการซ่อนในการติดตั้ง WordPress เริ่มต้น เอกสารรายการค่าเริ่มต้นทั้งหมดและเป็นไปได้

• inline - ชื่อขององค์ประกอบอินไลน์ในการผลิตเช่น "span" การเลือกข้อความปัจจุบันจะถูกรวมไว้ในองค์ประกอบอินไลน์
• block - ชื่อขององค์ประกอบบล็อกที่จะสร้างเช่น "h1″ องค์ประกอบบล็อกที่มีอยู่ภายในส่วนที่เลือกจะถูกแทนที่ด้วยองค์ประกอบบล็อกใหม่
• selector - CSS 3 รูปแบบตัวเลือกเพื่อค้นหาองค์ประกอบภายในส่วนที่เลือกโดย สิ่งนี้สามารถใช้เพื่อนำคลาสไปใช้กับองค์ประกอบที่เฉพาะเจาะจงหรือสิ่งที่ซับซ้อนเช่นแถวคี่ในตาราง
• คลาส - รายการของคลาสที่คั่นด้วยช่องว่างเพื่อใช้อิลิเมนต์ที่เลือกหรืออิลิเมนต์ inline / block ใหม่
• สไตล์ - วัตถุชื่อ / ค่าที่มีรายการ CSS tyle ที่จะใช้เช่นสี ฯลฯ
• คุณสมบัติ - ชื่อ / ค่าวัตถุที่มีคุณสมบัติที่จะใช้กับองค์ประกอบที่เลือกหรือองค์ประกอบแบบอินไลน์ / บล็อกใหม่
• exact - ปิดใช้งานคุณลักษณะการรวมสไตล์ที่คล้ายกันเมื่อใช้ สิ่งนี้จำเป็นสำหรับปัญหาการสืบทอด CSS บางอย่างเช่นการตกแต่งข้อความสำหรับขีดเส้นใต้ / ขีดกลาง
• wrapper - สถานะที่บอกว่ารูปแบบปัจจุบันเป็นรูปแบบคอนเทนเนอร์สำหรับองค์ประกอบบล็อก ตัวอย่างเช่น div wrapper หรือ blockquote

ปุ่มสไตล์

โปรดทราบว่าโดยค่าเริ่มต้นสไตล์ดรอปดาวน์จะถูกซ่อนใน WordPress ตอนแรกเพิ่มปุ่มสำหรับรูปแบบที่กำหนดเองไปยังแถบเมนูของ TinyMCE ในตัวอย่างสาย 2 mce_buttons_2กับตะขอ

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

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

สไตล์ที่กำหนดเอง

จากนั้นปรับปรุงการเลื่อนลงของปุ่มนี้ นอกจากนี้ยังมีประโยชน์ enancement ผ่านค่าเพิ่มเติมในอาร์เรย์ดูcodexสำหรับตัวอย่างนี้

/**
 * 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;

}

ผล

เมนูแบบเลื่อนลงที่ปรับปรุง

นอกจากนี้คุณยังสามารถปรับปรุงเมนูแบบหล่นลงได้ด้วย สร้าง var จากแหล่งตัวอย่างด้านบนด้วยโครงสร้างที่มากขึ้นในอาร์เรย์เช่นแหล่งที่มาของการติดตาม

    $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'
        )
    );

สำหรับความเป็นไปได้และพารามิเตอร์เพิ่มเติมให้ดูค่าเริ่มต้นของฟิลด์รูปแบบดรอปดาวน์สไตล์ (เขียนเป็นจาวาสคริปต์)

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'}
    ]}
];

เพิ่มสไตล์ชีทที่กำหนดเองให้กับบรรณาธิการ

ตอนนี้เป็นจุดที่ผ่านมาว่าคุณมี CSS 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;
}

อย่าลืมเพิ่มกฎชีตสไตล์นี้ไปยังสไตล์ชีทส่วนหน้า

ลบปุ่มรูปแบบ

เป็นการปรับปรุงคุณสามารถลบformatselectปุ่มแบบหล่นลงผ่านการตรวจสอบค่าในอาร์เรย์ปุ่ม เพิ่มแหล่งที่มาติดตามเพื่อฟังก์ชั่นที่เบ็ดfb_mce_editor_buttonsmce_buttons_2

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

ตามคำตอบนี้กุญแจสำคัญในการทำให้สไตล์ปรากฏในดรอปดาวน์คือ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;
}

มีประโยชน์มากและขอขอบคุณสำหรับพdefaultstylesอยน์เตอร์ ฉันพบว่าการรวมอาร์เรย์ไม่ทำงานจนกว่าจะแปลงตัวเลือกเริ่มต้นให้เป็น JSON ที่ถูกต้อง (ไม่ใช่ JavaScript ที่ถูกต้อง) ช่วยให้ด้านล่างผนวกส่วนต่อท้ายแบบหล่นลงของ WordPress tinymce แทนการแทนที่

ตัวเลือกเริ่มต้น (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" }
        ] }
 ]'; 

ใน functions.php ส่งคืนแฮชตัวเลือกที่มีขนาดใหญ่กว่า:

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;
}