ฉันสามารถเพิ่มรูปแบบที่กำหนดเองลงในตัวเลือกรูปแบบในแผงข้อความได้หรือไม่


16

ในเท็กซ์เอดิเตอร์ที่คุณสามารถตั้งค่าส่วนหัวและการตั้งค่าอื่น ๆ เป็นไปได้หรือไม่ที่จะเพิ่มสไตล์ของคุณเองเพื่อให้ลูกค้าใช้งาน? และแม้แต่ลบสิ่งที่ไม่จำเป็นออกไป?


2
WP3 และ TinyMCE สับสนในด้านนี้ ฉันไม่อยากจะเชื่อว่ามันเป็นไปไม่ได้ที่จะเพิ่มหรือปรับแต่งรูปแบบแช่งอย่างง่ายดายเหมือนใน CKEditor
cherouvim

1
ฉันเห็นด้วยมันเป็นความเจ็บปวดทั้งหมด
Mild Fuzz

คำตอบ:


17

"คลาสสิค" บรรณาธิการ TinyMCE มีสองเมนูแบบเลื่อนลง: formatselectสำหรับรูปแบบวรรคและstyleselectสำหรับรูปแบบตัวอักษร - ซึ่งยังสามารถมีลักษณะย่อหน้าที่จะทำให้มันเกิดความสับสนมากขึ้น การกำหนดค่าใน WordPress โดยค่าเริ่มต้นจะแสดงเฉพาะรูปแบบแบบเลื่อนลง หากคุณใช้สไตล์ชีทที่กำหนดเองกับตัวแก้ไข TinyMCE สามารถใช้เพื่อรับชื่อคลาสและเพิ่มลงในดรอปดาวน์สไตล์ - แต่วิธีนี้ใช้ไม่ได้ทุกครั้งสำหรับฉัน

ตั้งแต่ 3.0 คุณสามารถโทรหาadd_editor_style()คุณfunctions.phpเพื่อเพิ่มสไตล์ชีทให้กับบรรณาธิการ โดยค่าเริ่มต้นจะeditor-style.cssอยู่ในไดเรกทอรีธีมของคุณ ก่อน 3.0 คุณต้องขอลงในmce_cssตัวกรองเพื่อเพิ่ม URL ในสไตล์ชีทของบรรณาธิการ นี้จะสิ้นสุดในค่าการกำหนดค่า TinyMCEcontent_css

ในการเพิ่มสไตล์ดรอปดาวน์styleselectตัวเลือกจะต้องปรากฏในหนึ่งในอาร์เรย์การกำหนดค่าแถบปุ่ม ( theme_advanced_buttons[1-4]ใน TinyMCE, กรองโดยmce_buttons_[1-4]ใน WordPress) รายการของรูปแบบบล็อกจะถูกควบคุมโดยตัวเลือกในการ TinyMCEซึ่งคุณสามารถเพิ่มไปยังอาร์เรย์ควบคุมในตัวกรอง หากคุณต้องการที่จะกำหนดชื่อของสไตล์แบบเลื่อนลง (ไม่เพียง แต่ชื่อชั้นของ CSS) ดูตัวเลือก นอกจากนี้คุณยังสามารถใช้ตัวเลือกขั้นสูงที่ให้ความยืดหยุ่นในการกำหนดสไตล์theme_advanced_blockformatstiny_mce_before_inittheme_advanced_stylesstyle_formats

รหัส PHP ที่เกี่ยวข้องกับการกำหนดค่าตะขอและเริ่มต้นอยู่ในในฟังก์ชั่นwp-admin/includes/post.php wp_tiny_mce()การตั้งค่าของคุณอาจมีลักษณะดังนี้:

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

มีรูปแบบพิเศษที่. css ควรใช้โดยใช้ add_editor_style ดูเหมือนจะไม่มีอะไรเกิดขึ้น
Mild Fuzz

1
@Mild Fuzz: My earlier answer was misleading because WordPress shows only one of the two needed dropdowns. I updated my answer with a way to add the second dropdown and how to control it.
Jan Fabry

1
@Mild Fuzz: อธิบายพารามิเตอร์ของstyle_formatsรายการต่างๆ ในformatsหน้า wiki ที่เกี่ยวข้อง
Jan Fabry

1
ไม่มี longr สร้างข้อผิดพลาด แต่ไม่มีผลกระทบ!
Mild Fuzz

1
json_encode สร้าง "และไม่ใช่" ดังนั้น javascript จึงแตกคุณต้องทำ str_replace ('' ',' '', json_encode ($ style_formats))
cherouvim

0

ตามที่นี่ดร็อปดาวน์รูปแบบ TinyMCE ไม่แสดงตัวอย่างสไตล์อีกต่อไป

Kara ถูกต้องคุณต้องยกเลิกการกำหนดสไตล์เริ่มต้นเพื่อดูสไตล์ใหม่ ...

unset($init['preview_styles']);

return $settings;

โปรดเพิ่มรายละเอียดเพิ่มเติมเช่นไม่ชัดเจนว่า$settingsที่นี่คืออะไร ขอบคุณ
birgire
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.