jQuery और TinyMCE: textarea मान सबमिट नहीं करता है

Question

मैं फॉर्म जमा करने के लिए jQuery और TinyMCE का उपयोग कर रहा हूं , लेकिन इसमें क्रमांकन में एक समस्या है कि Textarea मान पोस्ट नहीं करता है।

यहाँ कोड है:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

भाषा: लैंग-जेएस

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

क्या आप मुझे बता सकते हैं कि मुझे क्या बदलना चाहिए, और पोस्ट किए गए पाठ क्षेत्र में मूल्य प्राप्त करने के लिए क्यों?

Answer 1

फॉर्म जमा करने से पहले, कॉल करें tinyMCE.triggerSave();

Comments

Jquery प्लगइन के साथ TinyMCE 3.2+ का उपयोग करना: $('#textarea_id').tinymce().save();अपने फॉर्म के ऑनसुमिट हैंडलर में।

— ब्रेंडेन

@ ब्रेंडेन मैं टिनिअम के 3.5.8 संस्करण का उपयोग कर रहा हूं और कंसोल में यह दिखाता है कि त्रुटि टिनिम्स () एक फ़ंक्शन नहीं है। मैंने अपने मुद्दे को बड़ी बात के साथ तय किया है

— कोड प्रैंक

सबसे अच्छा जवाब, छोटा लेकिन मीठा और सबसे साफ समाधान भी है। कई क्षेत्रों के साथ भी काम करता है। केवल दोष यह है कि यह सभी तत्वों के लिए बचत को ट्रिगर करता है।

— ह्यूगो ज़िंक

tinymce.init ({चयनकर्ता: ce textarea ’});

— सूरज

डैन मैल्कम के पास वर्तमान संस्करण के लिए सबसे अच्छा जवाब है - कृपया नीचे पोस्ट देखें - पहले सूचीबद्ध होने के लिए 70 से अधिक upvotes की आवश्यकता है।

— रॉबर्ट गुएस

Answer 2

TinyMCE संस्करण के माध्यम से किए गए परिवर्तन के रूप में आप छिपी हुई पाठ्य-सामग्री के मूल्यों को बनाए रखने के लिए TinyMCE को निम्न प्रकार से कॉन्फ़िगर कर सकते हैं:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

Textarea तत्वों को स्वचालित रूप से अद्यतित रखा जाएगा और प्रपत्रों को क्रमबद्ध करने आदि से पहले आपको किसी अतिरिक्त चरण की आवश्यकता नहीं होगी।

यह TinyMCE 4.0 पर परीक्षण किया गया है

डेमो चल रहा है: http://jsfiddle.net/9euk9/49/

अपडेट: ऊपर दिए गए कोड को DOOMANiac की टिप्पणी के आधार पर अपडेट किया गया है

Comments

महान, यह अब काम करता है। मुझे समझ नहीं आता कि संपादक के प्रलेखन पर ऐसा कुछ क्यों नहीं बताया गया है।

— जॉनए १०

tinemce.triggerSave()save()आपके सभी सक्रिय संपादकों के लिए फ़ंक्शन को कॉल करता है । यदि आपके पास एक से अधिक हैं, तो यह आपके ऑनकॉन्ग फ़ंक्शन को सेट करने के लिए अधिक कुशल है जैसे:editor.on('change', editor.save);

— DOOMANiac

@DooManiac - अच्छी कॉल, धन्यवाद। उत्तर और jsfiddle अद्यतन। मैंने कॉलबैक में अनाम फ़ंक्शन को यह सुनिश्चित करने के लिए बनाए रखा है कि सेव को संपादक ऑब्जेक्ट की एक विधि के रूप में कहा जाता है।

— दान मैल्कम

४.१.० के ऊपर बोल्ड और इटैलिक बटन के साथ एक बग है, जिसके लिए ce mce-active ’क्लास को सीधे नहीं जोड़ा जाता है (लेकिन केवल कुछ अक्षर textarea क्षेत्र में टाइप किए जाने के बाद) - इस प्रकार बटन नहीं सक्रिय देखें ... वायर्ड ... ( jsfiddle.net/9euk9/304 )

— औटाटाज़

महान समाधान!

— शकील अहमद

Answer 3

से TinyMCE, jQuery और अजाक्स रूपों :

TinyMCE फॉर्म सबमिशन

• जब कोई टैक्नेरा TinyMCE द्वारा प्रतिस्थापित किया जाता है, तो यह वास्तव में छिपा होता है और इसके बजाय TinyMCE एडिटर (एक iframe) प्रदर्शित होता है।

• हालाँकि, यह इस textarea की सामग्री है जो फॉर्म सबमिट होने पर भेजी जाती है। नतीजतन फॉर्म जमा करने से पहले इसकी सामग्री को अपडेट करना होगा।

• एक मानक प्रपत्र प्रस्तुत करने के लिए, इसे TinyMCE द्वारा नियंत्रित किया जाता है। अजाक्स फॉर्म जमा करने के लिए, आपको इसे मैन्युअल रूप से करना होगा, कॉल करके (फॉर्म सबमिट होने से पहले):

  tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

Answer 4

ऐसा इसलिए है क्योंकि यह अब एक textarea नहीं है। इसे एक iframe (और whatnot) से बदल दिया जाता है, और क्रमबद्ध फ़ंक्शन केवल फॉर्म फ़ील्ड से डेटा प्राप्त करता है।

प्रपत्र में एक छिपा फ़ील्ड जोड़ें:

<input type="hidden" id="question_html" name="question_html" />

फॉर्म पोस्ट करने से पहले, संपादक से डेटा प्राप्त करें और छिपे हुए फ़ील्ड में डालें:

$('#question_html').val(tinyMCE.get('question_text').getContent());

(यदि आप प्रपत्र को सामान्य रूप से पोस्ट करते हैं, तो संपादक निश्चित रूप से इस बात का ध्यान रखेगा, लेकिन जैसा कि आप फ़ॉर्म को स्क्रैप कर रहे हैं और फ़ॉर्म का उपयोग किए बिना स्वयं डेटा भेज रहे हैं, फ़ॉर्म पर ऑनसुबमिट घटना कभी भी ट्रिगर नहीं होती है।)

Comments

मैं jquery ajaxForm प्लगइन के साथ यह कर रहा हूं और textarea मान मेरे 2 जमा करने तक पास नहीं होता है, इसलिए मैं सोच रहा हूं कि आप ऑनसबमिट हैंडलर में सबमिट किए गए डेटा को बदल नहीं सकते हैं।

— ब्रेंडेन

@ बेंडेन: यदि प्लगइन फॉर्म को इंटरसेप्ट करने के लिए ऑनसुमिट इवेंट का भी उपयोग करता है, तो आपको यह सुनिश्चित करना होगा कि आपका ईवेंट हैंडलर पहले चला जाए, अन्यथा आपके द्वारा डेटा को स्थानांतरित करने का मौका होने से पहले प्लगइन फॉर्म से डेटा इकट्ठा करेगा। एक प्रपत्र क्षेत्र में संपादक।

— गुफ़ा

क्यों होता है पतन? यदि आप यह नहीं समझाते हैं कि ऐसा क्या है जो आपको लगता है कि यह गलत है, तो इससे उत्तर में सुधार नहीं हो सकता है।

— गुफ़ा

Answer 5

जब आप अपने फॉर्म पर अजाक्स चलाते हैं, तो आपको अपने टेक्स्टारिया को अपडेट करने के लिए टिनीएमसीई को पहले बताना होगा:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize(); 

Answer 6

मैंनें इस्तेमाल किया:

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

आपको बस इतना करना है।

Answer 7

यह सुनिश्चित करेगा कि पाठ्य सामग्री का ध्यान खो देने पर सामग्री बच जाती है

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

Answer 8

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

Comments

SmallMCE.activeEditor.getContent () का उपयोग करना केवल एक चीज थी जिससे मुझे काम मिल सकता था। धन्यवाद!

— मदुरकी

Answer 9

तुम भी बस jQuery प्लगइन और TinyMCE के लिए पैकेज का उपयोग कर सकते हैं यह इस प्रकार के मुद्दों को हल करता है।

Answer 10

मुझे कुछ समय के लिए यह समस्या हुई और triggerSave()काम नहीं किया, न ही अन्य तरीकों में से कोई भी।

इसलिए मुझे एक रास्ता मिला जो मेरे लिए काम कर रहा था (मैं इसे यहां जोड़ रहा हूं क्योंकि अन्य लोगों ने पहले से ही ट्रिगर की कोशिश की हो सकती है और आदि ...):

tinyMCE.init({
   selector: '.tinymce', // This is my <textarea> class
   setup : function(ed) {
                  ed.on('change', function(e) {
                     // This will print out all your content in the tinyMce box
                     console.log('the content '+ed.getContent());
                     // Your text from the tinyMce box will now be passed to your  text area ... 
                     $(".tinymce").text(ed.getContent()); 
                  });
            }
   ... Your other tinyMce settings ...
});

जब आप अपना फॉर्म जमा कर रहे हों या आपको जो कुछ भी करना है, वह आपके चयनकर्ता (मेरे मामले में .tinymce) से डेटा हड़प रहा है $('.tinymce').text()।

Answer 11

@ वेल्डर: मैं 3.6.7 के साथ एक ही मुद्दा था 'सामान्य मोड' में चल रहा है; और न ही ट्रिगर या सेव () काम कर रहे थे।

मैं jQuery के TinyMCE प्लगइन में बदल गया और बिना कुछ और किए यह अब काम कर रहा है। मैं कहीं न कहीं यह मान रहा हूं कि जिस लाइन पर उन्होंने TinyMCE के jQuery संस्करण के लिए किसी तरह के ऑटो ट्रिगर को लागू किया है।

Comments

दिलचस्प खोज। मेरा मानना ​​है कि आप संस्करण 3.5.7 का मतलब है? मैंने सिर्फ 3.5.7 और 3.5.8 के साथ कुछ परीक्षण किया, और tinyMCE.triggerSave()वास्तव में मेरे लिए सामान्य मोड में ठीक काम करता है। लेकिन आप सही हैं कि jquery मोड में पहले से ही किसी तरह का ऑटो सेव मौजूद है, जो कि tinymce.com/wiki.php/Plugin:autosave को विरोधाभासी करता है : "AJAX ऑटो सेव सपोर्ट प्रदान करने के लिए यह प्लगइन भविष्य में सबसे अधिक विस्तारित होगा।"

— Sayap

Answer 12

मैं सिर्फ टिनिम्स छिपाता हूं और फॉर्म जमा करता हूं, टेक्स्टारिया के बदले हुए मूल्य गायब हैं। इसलिए मैंने इसे जोड़ा:

$("textarea[id='id_answer']").change(function(){
    var editor_id = $(this).attr('id');
    var editor = tinymce.get(editor_id);
    editor.setContent($(this).val()).save();
});

इससे मेरा काम बनता है।

Answer 13

tinyMCE.triggerSave(); यह सही उत्तर लगता है, क्योंकि यह iFrame से आपके टेक्स्टारिया में परिवर्तन को सिंक करेगा।

अन्य उत्तरों में जोड़ने के लिए - आपको इसकी आवश्यकता क्यों है? मैं थोड़ी देर के लिए smallMCE का उपयोग कर रहा था और फार्म फ़ील्ड के माध्यम से नहीं आने वाले मुद्दों का सामना नहीं किया था। कुछ शोधों के बाद, यह फार्म तत्व सबमेट्स का उनका "ऑटो पैचिंग" निकला, जो डिफ़ॉल्ट रूप से है - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

मूल रूप से, वे पहले submitसे कॉल करने के लिए फिर से परिभाषित triggerSaveकरते हैं, लेकिन केवल अगर submit पहले से ही कुछ और द्वारा फिर से परिभाषित नहीं किया गया है:

if (!n.submit.nodeType && !n.submit.length) {
    t.formElement = n;
    n._mceOldSubmit = n.submit;
    n.submit = function() {
        // Save all instances
        tinymce.triggerSave();
        t.isNotDirty = 1;

        return t.formElement._mceOldSubmit(t.formElement);
    };
}

इसलिए, यदि आपके कोड (या अन्य 3 पार्टी लाइब्रेरी) में कुछ और गड़बड़ हो रहा है submit, तो उनका "ऑटो पैचिंग" काम नहीं करेगा और कॉल करना आवश्यक हो जाता है triggerSave।

संपादित करें: और वास्तव में ओपी के मामले में, submitबिल्कुल भी नहीं बुलाया जा रहा है। चूंकि यह अजाक्सडाउन है, इसलिए यह ऊपर वर्णित "ऑटो पैचिंग" को दरकिनार कर रहा है।

Answer 14

सबसे पहले:

1. आपको अपने पेज में jewery.tinymce.min.js पर टिनिअम jquery प्लगइन शामिल करना होगा

2. सबसे सरल और सबसे सुरक्षित तरीकों में से एक का उपयोग करना है getContentऔर setContentट्रिगर के साथ है। उदाहरण:

   tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
   tinyMCE.triggerSave();