WP 3.9 में TinyMCE4 को कैसे अनुकूलित करें - शैलियों और स्वरूपों के लिए पुराना तरीका अब काम नहीं करता है

Question

WP 3.9 से पहले मैं निम्नलिखित दो फिल्टर में लागू किया गया था।

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

ताकि अनुच्छेद प्रारूप ड्रॉपडाउन केवल p, h3 और h4 दिखाता है जबकि कस्टम स्टाइल ड्रॉपडाउन "हैडर सकल", "हेडर क्लिन" और इसी तरह प्रदर्शित होता है। लेकिन दुर्भाग्यवश wp और tinymce wp 3.9 के बाद से अब और परेशान नहीं करते हैं, मैं केवल मानक पैराग्राफ प्रारूप को अब ड्रॉपडाउन देखता हूं

साथ ही मानक शैली प्रारूप में गिरावट:

अब तक मुझे इस बारे में कोई डॉक्स नहीं मिला है कि क्या कोई हुक टिनिम्स के अपडेट के साथ बदल गया है 4. कोई भी जानता है? सादर राल्फ

अद्यतन: ठीक है, थोड़ा और अधिक शोध पर आधारित और नीचे दी गई टिप्पणियाँ मुझे लगता है कि मुझे पता चल गया है:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Comments

क्या आपने wordpress.stackexchange.com/questions/139163/… देखा है ?

— FUXIA

नहीं, मैंने नहीं देखा। धन्यवाद! लेकिन दुर्भाग्य से वहाँ वर्णित कोड के साथ यह केवल स्टाइल और पैरा ड्रॉप डाउन के बजाय एक बटन बनाने के लिए संभव है। पढ़ना और शोध करना जारी रखना है।

— --मरस

यहां बताया गया है कि आप मूल मेनू आइटम को कैसे रख सकते हैं style_selectऔर इसमें "कक्षाएं" मेनू जोड़ सकते हैं। wordpress.stackexchange.com/questions/143689/...

— Howdy_McGee

Answer 1

यदि आप देखते हैं class-wp-editor.phpतो आप पाएंगे कि जिस फ़िल्टर का आप उपयोग कर रहे हैं वह अभी भी है, हालाँकि सेटिंग्स अलग हैं।

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

मैं अनुमान लगा रहा हूं, लेकिन मुझे लगता है कि आपको जिस कुंजी को लक्षित करना है उसे बदलना होगा formats।

EDIT इसे जगह पर छोड़ रहा है, लेकिन ओपी पुष्टि करता है कि यह वह नहीं करता है जो वह प्रयास कर रहा है।

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

ध्यान रखें कि यह पूरी तरह से अप्रयुक्त है, इसलिए आपका लाभ भिन्न हो सकता है। (और एक उत्पादन साइट पर उपयोग न करें जब तक कि आपने इसका परीक्षण नहीं किया है)।

आगे चलकर

गहराई से खोदने से प्रारूप एक कस्टम लिटिलएमसीई बटन दिखाई देते हैं। आप देख सकते हैं कि formatselectबटन को इसमें जोड़ा गया mce_buttons_2है class-wp-editor.php। और फिर मैंने उस पर नज़र रखी tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

इस बात को ध्यान में रखते हुए, मुझे लगता है कि नया लक्ष्य 1. (आदर्श रूप से) में परिवर्तित होगा editor.settings.block_formatsया 2. उस बटन को फ़िल्टर करके mce_buttons_2और अपने पसंदीदा कस्टम संस्करण को जोड़कर हटा दें ।

परीक्षण किया और काम कर रहा है

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

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

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

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

लघु चेतावनी : मुझे यकीन नहीं है कि ड्रॉप-डाउन आइटम के लिए शैलियों को कहाँ जोड़ना है। TinyMCE नमूने में, "रेड हेडलाइन" विकल्प लाल है। मैं इसका पता नहीं लगा सका। यदि आप करते हैं, कृपया मुझे बताए।

Comments

धन्यवाद हेल्गा! मैंने पहले भी क्लास-डब्ल्यूपी-एडिटर में देखा है। लेकिन अनिश्चित था कि सिंटैक्स क्या होना चाहिए (अपडेट किए गए टिनिम्सी के लिए बहुत संबंधित पीपी नहीं है)। अब आपके सुझाव की कोशिश की। मेरे शुरुआती स्निपेट्स के साथ भी ऐसा ही परिणाम है। TinyMCE को यह पसंद नहीं है कि init कैसा दिखता है। टिनिअम साइट पर मैंने कस्टम प्रारूपों के लिए एक उदाहरण पाया है, केवल js, और मैं इसे wp और php की ओर अनुकूलित करने में विफल रहा: tinymce.com/tryit/custom_formats.php

— ermarus

बहुत मदद, धन्यवाद! बस यह जोड़ना चाहता था कि block_formatsविकल्प में अनुगामी नहीं हो सकता है; । मैं सहेजे गए विन्यास विकल्पों से मूल्य बना रहा था और एक अनुगामी था; इसने सूची में सेंध लगाई। आशा है कि कुछ मिनटों में किसी को बचाता है।

— एडम पोप

@indextwo हाँ, मैंने इसे यहाँ हल किया (जितना अच्छा हो सके) और तय किया ... अरे ... ब्लॉग पोस्ट! यदि आप इनलाइन के रूप में परिभाषित करते हैं तो भी आपको क्लास नहीं मिलती है? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?

— हेलगेटहाइकिंग

प्रारूप मेनू में आइटम रंग शैलियों को छोड़कर , आपके संपादक- styles.css से शैलियों का वारिस करते हैं। यदि आप रंग शैलियों को भी चाहते हैं, तो इस कोड को mce_mod () फ़ंक्शन में जोड़कर मेरे लिए काम करें:unset($init['preview_styles']);

— Dalton

अपने छोटे से चेतावनी के बारे में @helgatheviking : यदि आप सेट करते हैं तो आप सभी शैलियों को सक्षम कर सकते हैं $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';। मुझे लगता है कि यह मूल रूप से वैसा ही है जैसा @ डॉल्टन ने सुझाव दिया था, यद्यपि अधिक स्पष्ट तरीके से। यह बस डिफ़ॉल्ट मान सेट करता है, tmce प्रलेखन के

— robro