AJAX / jQuery के माध्यम से wp_editor () कैसे लोड करें

Question

मेरे पास एक थीम है जो कस्टम विकसित और वास्तव में जटिल है। मेरे पास जो चीजें हैं उनमें से एक कई सामग्री क्षेत्र हैं जहां उपयोगकर्ता विशिष्ट टैब के लिए सामग्री निर्दिष्ट कर सकते हैं। मैं wp_editor()फ़ंक्शन के माध्यम से वर्डप्रेस संपादक के कई उदाहरणों को लोड करता हूं । यह पूरी तरह से काम करता है। (यह सब "पृष्ठ" पोस्ट प्रकार में) व्यवस्थापक पक्ष पर है

हालाँकि, मैंने कुछ सुधार करना शुरू किया, जिसमें गतिशील रूप से टैब जोड़ने / हटाने की क्षमता शामिल है (इससे पहले, मैंने पृष्ठ पर 6 संपादकों को लोड किया था)। उपयोगकर्ताओं के पास 1-7 टैब हो सकते हैं।

जब उपयोगकर्ता एक टैब जोड़ते हैं, तो उसे पृष्ठ पर संपादक का एक उदाहरण जोड़ना होगा। हालाँकि, मैं चाहे जो भी कोशिश करूं, मुझे इसे लोड करने और सही ढंग से प्रदर्शित करने के लिए नहीं मिल सकता है।

यहाँ 2 चीजें हैं जो मैंने अब तक कोशिश की हैं:

1. एक php फ़ाइल बनाएं जिसमें व्यवस्थापक बूटस्ट्रैप शामिल है, और फिर संपादक को लोड करना है wp_editor()। मैं तब $.loadपेज को कॉल करने के लिए एक jQuery करता हूं और परिणामी HTML को उस क्षेत्र में शामिल करता हूं जिसे इसे प्रदर्शित करने की आवश्यकता है। यह वास्तव में काम नहीं करता है, हालांकि, जैसे ही संपादक स्वरूपण बटन गायब हो जाते हैं (यह ध्यान देने योग्य है, यह पृष्ठ को सीधे ऊपर खींचता है, संपादक पूरी तरह से प्रदर्शित करता है और कार्य करता है)
2. पृष्ठ पर संपादक को एक छिपे हुए div के अंदर लोड किया गया है, और फिर एक बार टैब जोड़ने के बाद, इसे जगह में ले जाने के लिए jquery का उपयोग करें। यह संपादक को चातुर्य में लोड करता है, लेकिन आप किसी भी संपादक बटन का उपयोग नहीं कर सकते हैं (वे प्रदर्शित करते हैं, लेकिन कुछ भी नहीं करते हैं), और आप अपने कर्सर को पाठ क्षेत्र में नहीं रख सकते हैं (जिज्ञासु, हालांकि, HTML मोड पर स्विच करना टाइपिंग और HTML मोड बटन के साथ कुछ बातचीत की अनुमति देता है)

तो सवाल यह है कि किसी को भी AJAX कॉल के माध्यम से संपादकों को जोड़ने का कोई सौभाग्य मिला है? कोई सुझाव?

Comments

क्या आप के माध्यम से ajax कॉल करने की कोशिश की admin-ajax.php? यदि आपके कोड के साथ कोई फ़ंक्शन नहीं है, तो इसके माध्यम से कॉल करेंadmin-ajax.php

— सिसिर

क्या यह सुझाव मदद करता है ? यदि हां, तो यह एक वर्डप्रेस सवाल नहीं है। :)

— FUXIA

@ शिशिर, अगर मैं आपके सुझाव को सही ढंग से पढ़ रहा हूं, तो यह काम नहीं किया। मैंने इसका उपयोग अजाक्स फॉर्म को कॉल करने के लिए किया था: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');और फिर एक फ़ंक्शन जोड़ा जो रिटर्न करता है wp_editor()। इसे बिना किसी समस्या के कहा जाता है, लेकिन यह अभी भी संपादक को बिना किसी बटन के लौटाता है। (ओपी में आइटम 1 के समान सटीक परिणाम)

— हारून वैगनर

एक बार प्रारंभिक TinyMCE DOM में इधर-उधर नहीं किया जा सकता है। आपको इसे हटाना होगा, DOM में जाना होगा और फिर से इनिशियलाइज़ करना होगा। इसी तरह का कोड है, लेकिन मेरे ब्लॉग पर यहाँ टिप्पणियों के लिए: techytalk.info/… उपयोगकर्ता द्वारा उत्तर / क्लिक रद्द करने पर टिप्पणियाँ फ़ॉर्म को स्थानांतरित कर दिया जाता है।

Answer 1

दिखाने के लिए क्विकटैग प्राप्त करने के लिए, आपको उन्हें अपने अजाक्स अधूरा हैंडलर के भीतर फिर से लिखना होगा।

quicktags({id : 'editorcontentid'});

मेरा अजाक्स सफलता हैंडलर इस तरह दिखता है;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

मैं संपादक को पहले एक स्थिर फ़ंक्शन को कॉल करके लोड करने में कामयाब रहा हूं जो संपादक बनाता है और इसे चर के रूप में कैश करता है। मैं इनिट पर संपादक निर्माण विधि चलाता हूं। ऐसा लगता है कि वर्डप्रेस को सभी आवश्यक स्क्रिप्टों को संलग्न करने के लिए मिला है।

यह महत्वपूर्ण है कि जब आप अपना संपादक उदाहरण बनाते हैं, कि आप इसे टिनिम्स का उपयोग करने के लिए सेट करते हैं, तो उस तरह से टिनिम्स जेएस फाइल को भी एनक्वाइड किया जाता है।

Answer 2

इसके साथ संघर्ष करने के बाद, नए तत्व जोड़ने के बाद, कॉलबैक में, जो समाधान काम करता है:

tinymce.execCommand( 'mceAddEditor', true, element.id );

यह अजीब है कि कोडेक्स के अंदर शून्य प्रलेखन है।

Comments

tinymce एक बाहरी संसाधन है, इसलिए मुझे लगता है कि वे सोच सकते हैं कि tinymce के स्वयं के डॉक्स इसे कवर करते हैं - tinymce.com/docs - लेकिन उदाहरणों पर बहुत खराब ... इसके अलावा काम करने के लिए आपको इस उत्तर के लिए tincemce स्क्रिप्ट को शामिल करना होगा! (सबसे आसान तरीका है कि एक डमी PHP wp_editor()को tinymceआर्ग सेट के साथ true:-) पर उत्पादन करना है

— jave.web

धन्यवाद दोस्त ... यह मेरे लिए भी काम करता है - अजाक्स से डेटा वापस करने के बाद मैं बस यही आरंभ करता हूं ...;)

— सगिव एसईओ

Answer 3

अंत में, काम कर समाधान:

वर्डप्रेस में कार्रवाई जोड़ें, कहने My_Action_Nameदें (ध्यान दें, textarea ID My_TextAreaID_22):

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

अब, डैशबोर्ड में, इस फ़ंक्शन को निष्पादित करें (ध्यान दें, का उपयोग करके My_TextAreaID_22और My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE

Answer 4

आपको अपने अजाक्स टेक्स्टारिया को जोड़ने से पहले संपादक को फिर से कॉल करने की आवश्यकता है, मैंने इसे इस तरह किया:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

फिर इस तरह अपने ajax के बाद अपने समारोह को बुलाओ:

$('#my_new_textarea_container').html(response).tinymce_textareas();

Comments

कृपया बताएं कि यह कैसे काम करता है? यह काम नहीं करता। मैं इसे करने की कोशिश की।

— अहमद फौद

Ajax कंटेंट को जोड़ने के बाद जिसमें textarea responseसम्‍मिलित है smallMCE on ( ), को कॉल करें tymymce_textareas फंक्शन जो newMareas पर लिटिलएमसीई को इनिशियलाइज़ करता है।

— शौहर

Answer 5

पर @toscho से प्रयोग करने योग्य समाधान GitHub । वह इस अच्छे परिणाम का निर्माण यहां एक प्रश्न के लिए करता है, अधिक विवरण के लिए उसका उत्तर देखें।

Comments

इसके लिए उपयोग के लिए एक पुस्तकालय की आवश्यकता होती है - T5 ... एक WP- केवल समाधान नहीं

— cale_b

Answer 6

इस कोड का उपयोग करें, आशा है कि यह मदद करेगा:

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

अधिक विवरण यहां पाया जा सकता है ।

Comments

कृपया यह बताएं कि यह कोड कैसे मदद कर सकता है और फिर आगे के विवरण के लिए लिंक जोड़ें। यदि लिंक टूट गया है तो लिंक-केवल उत्तर अमान्य हो जाते हैं - मुझे आशा है कि आप समझ गए होंगे। :)

— मयिनुल इस्लाम

वह लिंक अभी टूटा हुआ है और मेरे पास उत्तर के पीछे कोई संदर्भ नहीं है। (कई कारणों में से एक क्यों "बस एक लिंक" उत्तर खराब हैं)

— सूद

यह काम करता है लेकिन कुछ मुद्दे हैं, जब आप पाठ या दृश्य का चयन करते हैं तो यह संपादक के भीतर डुप्लिकेट पाठ क्षेत्र बनाता है

— जोहान प्रीटोरियस

Answer 7

मैंने इसे इस तरह से प्रबंधित किया:

1. पहले आपको मुख्य पृष्ठ पर wp_editor को कॉल करने की आवश्यकता है, जहां से आप ajax कहते हैं। लेकिन आपको इसे छिपे हुए div में लपेटना होगा:

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

आईडी रैंडम और यूनिक होनी चाहिए। सेटिंग्स आपके ajax संपादक में सेटिंग्स के समान होनी चाहिए।

2. दूसरा आपको इसे अजाक्स प्रतिक्रिया में कॉल करने की आवश्यकता है:

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

Answer 8

यह व्यवस्थापक पृष्ठों पर काम करेगा।

जेएस AJAX द्वारा एक कंटेनर में एक नए wp संपादक को जोड़ने के लिए:

1) wp_editor को वापस करने के लिए functions.php में एक wp_ajax फंक्शन बनाएं

2) एक नए टेक्स्ट एडिटर का अनुरोध करने के लिए एक jQuery स्क्रिप्ट बनाएं और एक बटन दबाते समय इस मामले के लिए इसे कंटेनर में जोड़ें

PHP फ़ाइल

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

जेएस स्क्रिप्ट (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

एन्क्यू स्क्रिप्ट्स कॉल:

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');