TinyMCE: सीएसएस को प्रारूपण ड्रॉपडाउन में जोड़ना

Question

मैंने add_editor_style () का उपयोग करके एक TinyMCE स्टाइलशीट को सफलतापूर्वक जोड़ा ताकि मैं TinyMCE संपादक के शरीर में शैलियों का पूर्वावलोकन कर सकूं।

हालाँकि, क्या मैं यह मानने में सही हूं कि add_editor_style () फ़ंक्शन केवल संपादक के शरीर के लिए शैली का उपयोग कर सकता है?

यदि हां, तो क्या कोई अन्य विधि या फ़ंक्शन है जिसका उपयोग मैं TinyMCE फॉर्मेट ड्रॉपडाउन की स्टाइल को एक्सेस करने के लिए कर सकता हूं?

Answer 1

आप ड्रॉप डाउन सूची को बढ़ा नहीं सकते formatselect। लेकिन आप हुक tiny_mce_before_initको दूसरी ड्रॉप डाउन के साथ बढ़ा सकते हैं styleselect, डिफ़ॉल्ट वर्डप्रेस इंस्टॉल में छिपा है। प्रलेखन सभी डिफ़ॉल्ट और संभावनाओं की सूची।

• इनलाइन - उदाहरण के लिए इनलाइन तत्व का नाम "स्पैन"। वर्तमान पाठ चयन को इस इनलाइन तत्व में लपेटा जाएगा।
• ब्लॉक - उदाहरण के लिए उत्पादन करने के लिए ब्लॉक तत्व का नाम “h1 block। चयन के भीतर मौजूदा ब्लॉक तत्वों को नए ब्लॉक तत्व के साथ बदल दिया जाता है।
• चयनकर्ता - चयन के भीतर तत्वों को खोजने के लिए CSS 3 चयनकर्ता पैटर्न। इसका उपयोग विशिष्ट तत्वों में कक्षाएं लगाने या किसी तालिका में विषम पंक्तियों जैसी जटिल चीजों के लिए किया जा सकता है।
• कक्षाएं - चयनित तत्वों या नए इनलाइन / ब्लॉक तत्व को लागू करने के लिए अंतरिक्ष की अलग-अलग कक्षाओं की सूची।
• शैलियों - रंग आदि जैसे लागू करने के लिए सीएसएस tyle आइटम के साथ नाम / मूल्य वस्तु
• विशेषताएँ - चयनित तत्वों या नए इनलाइन / ब्लॉक तत्व पर लागू करने के लिए विशेषताओं के साथ नाम / मान ऑब्जेक्ट।
• सटीक - उपयोग किए जाने पर मर्ज समान शैलियों को अक्षम करता है। यह कुछ सीएसएस वंशानुक्रम के मुद्दों जैसे कि अंडरलाइन / स्ट्राइकथो के लिए टेक्स्ट-डेकोरेशन के लिए आवश्यक है।
• आवरण - राज्य जो बताता है कि वर्तमान प्रारूप ब्लॉक तत्वों के लिए एक कंटेनर प्रारूप है। उदाहरण के लिए एक div आवरण या अवरोधक।

स्टाइल बटन

ध्यान दें कि, डिफ़ॉल्ट रूप से, स्टाइल ड्रॉपडाउन वर्डप्रेस में छिपा हुआ है। पहले 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;
}

कस्टम शैलियाँ

फिर इस बटन के ड्रॉप डाउन को बढ़ाएं। सरणी में अतिरिक्त मूल्य के माध्यम से उपयोग को बढ़ाएं, इस उदाहरण के लिए कोडेक्स देखें ।

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

}

परिणाम

उन्नत ड्रॉप डाउन मेनू

आप एक पेड़ मेनू के साथ ड्रॉप डाउन भी बढ़ा सकते हैं। उपरोक्त स्रोत की तरह सरणी में अधिक संरचना के साथ उदाहरण स्रोत से संस्करण बनाएं।

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

कस्टम स्टाइलशीट को एडिटर में जोड़ें

अब अंतिम बिंदु है, कि आप हुक के माध्यम से इस प्रारूप के लिए कस्टम सीएसएस को शामिल करते हैं 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_buttonsहुक में फ़ंक्शन का अनुसरण स्रोत जोड़ें mce_buttons_2।

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

Comments

मुझे लगता है कि मैं इस अवधारणा को समझता हूं: अनिवार्य रूप से आप WP के मानक स्वरूपण बॉक्स को हटा देते हैं, और फिर स्टाइल को नियंत्रित करने के लिए अपनी खुद की स्टाइल ड्रॉपडाउन जोड़ते हैं। क्या मेरी समझ सही है?

— मार्क पी

सही। वर्तमान में मुझे formatselectड्रॉपडाउन को बदलने के लिए एक हुक नहीं मिल रहा है । यह ड्रॉपडाउन एक मेनू बनाने के लिए एक फ़ंक्शन नहीं है, WP के tinymce.js में स्थिर मूल्य है।

— १ge:

इस उत्तर का संकेत भी , अब मुझे मिल गया है।

— ०३ पर bu

आह अच्छा! धन्यवाद, यह अभी के लिए एक अच्छा समाधान है। मैं इसे आज़माऊँगा!

— मार्क पी

नोट: डिफ़ॉल्ट शैलियों $settings['style_formats_merge'] = true;को »fb_mce_before_init ()« में जोड़कर प्रारूप ड्रॉपडाउन में जोड़ा जा सकता है ।

— निकोलई

Answer 2

प्रति इस जवाब , शैली हो रही करने के लिए महत्वपूर्ण में लटकती है प्रकट करने के लिए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;
}

Answer 3

बहुत उपयोगी और defaultstylesसंकेत के लिए धन्यवाद । मैंने पाया कि जब तक कि JSON (वैध जावास्क्रिप्ट नहीं) को वैध विकल्पों में परिवर्तित करने तक विलय ऐरे काम नहीं कर रहा था। नीचे वर्डप्रेस टिनिम्स के ड्रॉप-डाउन को बदलने के बजाय अपग्रेड करने की अनुमति देता है

डिफ़ॉल्ट विकल्प (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" }
        ] }
 ]'; 

फ़ंक्शन में। बड़ा विकल्प हैश वापस करें:

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

Comments

नोट: डिफ़ॉल्ट शैलियों $settings['style_formats_merge'] = true;को »fb_mce_before_init ()« में जोड़कर प्रारूप ड्रॉपडाउन में जोड़ा जा सकता है ।

— निकोलई