TinyMCE में कस्टम CSS (थीम विकल्प) कैसे जोड़ें?

14

मैं वर्डप्रेस में TinyMCE दृश्य संपादक के लिए कस्टम सीएसएस (थीम विकल्पों के माध्यम से सेट) को जोड़ने की कोशिश कर रहा हूं। सामने के छोर पर, थीम इस सीएसएस को उत्पन्न करता है और इसे wp_headहुक पर आउटपुट करता है । मैं जिस समस्या में चल रहा हूं, वह उस सीएसएस आउटपुट को संपादक में जोड़ने में सक्षम हो रही है।

ऐसा add_editor_style( 'editor-style.css' )इसलिए नहीं किया जा सकता क्योंकि हमें थीम विकल्प का उपयोग करने के लिए PHP का उपयोग करने की आवश्यकता है।

उदाहरण के तौर पर यह सामने के छोर पर कैसे काम करता है:

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

मुझे दृश्य संपादक में उस कस्टम शैली को प्राप्त करने के लिए एक विधि की आवश्यकता है। किसी भी तरह की सहायता का स्वागत किया जाएगा।

tinymce

— जस्टिन टडलॉक
स्रोत

1

नोट: कस्टम पोस्ट-कंटेंट CSS प्लगिन टेरिटरी है , और इसे किसी थीम में नहीं डाला जाना चाहिए। अन्यथा, किसी भिन्न थीम पर स्विच करने पर उपयोगकर्ता अपना कस्टम CSS खो देंगे।

— चिप बेनेट

@ChipBennett मैं केवल आंशिक रूप से सहमत हूँ। यह अत्यधिक इस बात पर निर्भर करता है कि आप क्या स्टाइल कर रहे हैं। इसके अलावा, यह कोई फर्क नहीं पड़ता कि यह कहाँ है (उस प्रश्न के लिए)।

— कासर

@ChipBennett यह विषय शैलियों के साथ करना है, न कि कस्टम पोस्ट सामग्री सीएसएस। यह सुंदर मानक सामान है जिसे आप थीम कस्टमाइज़र के साथ कर सकते हैं। यह सिर्फ इन शैलियों को लागू कर रहा है जो मुझे स्टम्प्ड किया है। यह तारीफ के लिए है editor-style.css, जो कि विषय क्षेत्र है।

— जस्टिन टडलॉक

प्रतीक्षा करें: क्या आप गतिशील कस्टम संपादक शैली के बारे में बात कर रहे हैं ? जैसे: दृश्य संपादक (TinyMCE) को थीम विकल्प-परिभाषित शैलियों से अवगत कराते हैं? यदि हां, तो मेरी मूल टिप्पणी और प्रश्न के लिए +1 की अवहेलना करें ।

— चिप बेनेट

क्या आप एक संपादन फ़ाइल कर सकते हैं और थीम शैली के लिए पूर्ण सेट का एक उदाहरण दिखा सकते हैं? तब परीक्षण करना आसान होगा।

— कैसर

7

समाधान 1

यह जावास्क्रिप्ट समाधान के रूप में काम करता है:

उदाहरण:

tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

बस अपने js कंसोल को खोलें और त्वरित परीक्षण के लिए पेस्ट करें। विशिष्ट संपादक को लक्षित करने के लिए एक का उपयोग करना चाहिए:

tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

यह प्रदान किए गए स्ट्रिंग को संपादकों iframe में इंजेक्ट करेगा <head><style id="mceDefaultStyles"></style> ...

समाधान २

फ़िल्टर का उपयोग करके संपादक init पर गतिशील शैलियों को जोड़ने के लिए कॉलबैक हैंडलर के रूप में wp_ajax का उपयोग करें

add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";

    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}

— ungestaltbar
स्रोत

2

मुझे पूरी तरह से यकीन नहीं है कि इसके साथ क्या करना है।

— जस्टिन टैडलॉक

समाधान # 2 वास्तव में मेरे लिए बहुत मायने रखता है। मैं देता हूँ कि एक परीक्षण चलाते हैं।

— जस्टिन टडलॉक

मैं # 2 समाधान के साथ चला गया। अंतर यह है कि मैंने पहले फ़ंक्शन को गिरा दिया और इसका उपयोग add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )संपादक शैलियों को जोड़ने के लिए थीम का मानक तरीका है।

— जस्टिन टैडलॉक

बस अपने स्वयं के संपादन के लिए, मुझे यह जानने के लिए उत्सुक होना चाहिए कि क्या mce_cssआपके लिए काम किया गया है (यदि आपने इसे आज़माया है)।

— चिप बैनेट

मैंने वास्तव में इसकी कोशिश नहीं की है क्योंकि मुझे पता था कि आप एक गैर-सीएसएस फ़ाइल पास कर सकते हैं add_editor_style(), लेकिन यह कोड को देखकर ठीक काम करना चाहिए। उपयोग करना mce_cssवास्तव में उस मामले में एक बेहतर समाधान है जिसे आपको शैलियों के माध्यम से जोड़ने की आवश्यकता है add_editor_style()। एक विषय में ऐसा एक कारण है क्योंकि पूर्ण URL को इसके द्वारा जोड़े add_editor_style()गए ऑर्डर के बावजूद, पहले आउटपुट होते हैं।

— जस्टिन टैडलॉक

10

वर्डप्रेस एक mce_cssफिल्टर प्रदान करता है , जिसका उपयोग कस्टम स्टाइलशीट को विज़ुअल एडिटर में जोड़ने के लिए किया जा सकता है। कोडेक्स के अनुसार:

फ़ाइल एक .php फ़ाइल हो सकती है, जो सामग्री संपादक के लिए सीएसएस नियमों की गतिशील पीढ़ी की अनुमति देती है।

उदाहरण कोडेक्स फ़िल्टर कॉलबैक, एक थीम के लिए संशोधित:

function wpse120831_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );

— चिप बेनेट
स्रोत

श्री बेनेट तेजी से था, बस मेरे जवाब में नीचे के रूप में अच्छी तरह से जोड़ा :), लेकिन थोड़ा अलग।

— २०

@ungestaltbar हम वास्तव में दो पूरी तरह से अलग फिल्टर का उपयोग कर रहे हैं। :)

— चिप बेनेट

उसी परिणाम के साथ :)

— ungestaltbar

4

मैंने @ungestaltbar द्वारा उपरोक्त समाधान स्वीकार किया। हालाँकि, मैं इस उत्तर पर पूर्ण समाधान के साथ थोड़ा विस्तार करना चाहता था जिसका मैं उपयोग कर रहा हूं ताकि अन्य यह देख सकें कि यह कैसे काम करता है।

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

मैं उम्मीद कर रहा हूं कि इस तरह से यहां एक और उत्तर पोस्ट करना ठीक है। मुझे अपने स्वीकृत समाधान के प्रत्यक्ष उत्तर में इसे पोस्ट करने का कोई तरीका नहीं दिखाई दिया। मैं अभी भी सीख रहा हूं कि डब्ल्यूपीएसई का उपयोग कैसे करें।

— जस्टिन टडलॉक
स्रोत

हो सकता है कि आपको add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );एडिटर को फ्रंटेंड (गैर लॉग-इन उपयोगकर्ताओं के लिए) पर उपयोग किया जाए।

— ओरिजनेक्स

हां, महत्वपूर्ण बदलावों / ट्वीक्स के साथ उत्तर पूरी तरह से ठीक है। :) FYI करें: यदि यह मूल उत्तर में तय किए जाने वाले कुछ मुद्दे पर था, तो इसे संपादित करने के लिए इसे जमा करना होगा।

— रारस्ट

@ ऑरिजिनलएक्सईई - हां। मैं इसे अपडेट करूंगा।

— जस्टिन टैडलॉक

बस किसी और के लिए एक टिप जो बाद में यह पाता है, मैं इसे ठीक से काम करने में असमर्थ था, जैसा कि यह प्रस्तुत किया गया है। मुझे अंततः पता चला कि मुझे कॉलबैक में हेडर जानकारी शामिल करनी थी, इसलिए इसे सीएसएस के रूप में देखा जाएगा। हेडर ("सामग्री-प्रकार: पाठ / सीएसएस; चारसेट; यूटीएफ -8"); निश्चित नहीं कि यह मेरे .htaccess में कुछ अलग है या क्या।

— स्काईशैब

4

मुझे शायद इस पार्टी के लिए देर हो गई है लेकिन उपरोक्त समाधान का उपयोग करने के बाद, मुझे जल्द ही एहसास हुआ कि संपादक की पेज लोड गति गंभीर रूप से अपंग हो गई थी! कोड को देखने के लिए उत्सुक, मुझे एहसास हुआ कि कोड को लंबे समय के बाद क्रियान्वित किया जा रहा है जब छोटे से छोटे.सक्रिय करनेवाला को प्रारंभ किया गया है। कोड setInterval () विधि का उपयोग करता है जो निर्दिष्ट अंतराल पर एक अभिव्यक्ति का मूल्यांकन करता है, मेरा मानना है कि ऐसा इसलिए था क्योंकि आप कोड निष्पादन "सक्रियईटर" के दौरान किस बिंदु पर निर्धारित नहीं कर सकते थे। यह वही है जो पृष्ठ गति को अपने घुटनों तक ले आया है।

एक प्लगइन का उपयोग करने के लिए मैं एक बेहतर समाधान का उपयोग कर रहा हूं

   /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

सक्रिय संपादक के आरंभ होने के बाद कोड को निष्पादित करने के लिए एक देशी TinyMCE श्रोता का उपयोग किया जाता है। मुझे उम्मीद है कि इससे वहां किसी को मदद मिलेगी। सधन्यवाद।

— आयबरे एम
स्रोत

1

यह मेरे लिए काम कर रहा है। यह सिर्फ टिनिअम 4.0 में एक अपग्रेडेड एपीआई कॉल है जिसे आपको ed.onInit.add (फ़ंक्शन () {... से ed.on ('init'), फ़ंक्शन () {...

— मोहम्मद

1

यह इस प्रश्न के लिए WordPress.org फ़ोरम पर पोस्ट किया गया एक संशोधित समाधान है: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

यह निश्चित रूप से काम करता है। मैं हालांकि कोई जेएस गुरु नहीं हूं, इसलिए मुझे पूरी तरह यकीन नहीं है कि यह सबसे अच्छा समाधान है।

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

    <script type="text/javascript">
    jQuery( document ).ready(

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            var checkInterval = setInterval(
                function() {

                    if ( 'undefined' !== typeof( tinyMCE ) ) {
                        if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {

                            jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );

                            clearInterval( checkInterval );
                        }
                    }
                }, 
                500 
            );
        }
    );
    </script>
<?php }

इसे JS फ़ाइल में भी जोड़ा जा सकता है। आप आसानी से wp_localize_script()उस के माध्यम से चर पारित कर सकते हैं ।

— जस्टिन टडलॉक
स्रोत