TinyMCE और HTML5 फॉर्म सत्यापन

Question

मैं रेल अनुप्रयोग में TinyMCE का उपयोग कर रहा हूं। मेरे रूप में, मेरे पास TinyMCE के साथ "विवरण" फ़ील्ड है और यह फ़ील्ड फॉर्म सत्यापन के लिए अनिवार्य है।

लेकिन जब मैं अपना फॉर्म जमा करने का प्रयास करता हूं, तो मैं HTML फॉर्म सत्यापन के कारण नहीं कर सकता। मेरा ब्राउज़र (क्रोम और फ़ायरफ़ॉक्स) मुझे बताता है कि फ़ील्ड खाली है। और मुझे एक और समस्या है। जब क्रोम खाली फ़ील्ड के लिए संवाद प्रदर्शित करता है, तो यह मेरे पृष्ठ के शीर्ष पर दिखाई देता है, न कि मेरे फॉर्म फ़ील्ड के पास।

Answer 1

मैं textareas में "oninit" विकल्प का इस्तेमाल किया और काम किया:

oninit: function(editor) { 
    $currentTextArea.closest('form').bind('submit, invalid', function() { 
     editor.save(); 
    }); 
} 

आप onChange घटना का उपयोग करने की कोशिश कर सकते हैं, लेकिन यह फ़ायरफ़ॉक्स में ठीक से काम नहीं करता है।

मेरे पूरा कोड:

$('textarea.tinymce').each(function(){ 
    var options = { 
     theme : "advanced", 
     skin : "cirkuit", 
     plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker", 
     theme_advanced_buttons2 : "", 
     theme_advanced_buttons3 : "", 
     theme_advanced_buttons4 : "", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true 
    }, 
    $this = $(this); 

    // fix TinyMCE bug 
    if ($this.is('[required]')) { 
     options.oninit = function(editor) { 
      $this.closest('form').bind('submit, invalid', function() { 
       editor.save(); 
      }); 
     } 
    } 
    $this.tinymce(options); 
}); 

Answer 2

एफएफ आवश्यक fileld के लिए लेकिन गलत जगह पर एक बुलबुला दिखाई, क्रोम एक त्रुटि फेंकता है .. क्योंकि यह क्षेत्र बुलबुला दिखाने के लिए नहीं मिल रहा है तो मेरी समाधान अक्षम प्रदर्शन है : TinyMCE द्वारा सेट की गई कोई शैली नहीं और फ़ील्ड आकार को कम करें और इसकी दृश्यता छिपाएं। इस तरह ब्राउज़र इस क्षेत्र के बगल में बबल दिखाएगा क्योंकि यह फ़ील्ड TinyMCE संपादक के बगल में है, उपयोगकर्ता को पता चलेगा कि आवश्यक फ़ील्ड क्या गुम है।

textarea.tinymce { 
 
\t background: transparent; 
 
\t border: none; 
 
\t box-shadow: none; 
 
\t display: block !important; 
 
\t height: 0; 
 
\t resize: none; 
 
\t width: 0; 
 
\t visibility: hidden; 
 
}

Answer 3

मैं @lucaswxp कोड लिया और इसे थोड़ा बदल गया है, क्योंकि फ़ायरफ़ॉक्स एक त्रुटि फेंक दिया गया था ($ this.is नहीं एक समारोह है, अगर मैं इसे सही ढंग से याद करते हैं)।

$this.tinymce(options); 

लिए:

tinymce.init(options); 

पूर्ण कोड: इसके अलावा, मैं जिस तरह से यह से कोड आग बदल

$(window).load(function() { 

var options = { 
     selector: 'textarea', 
     skin: "lightgray" 
    }, 
    $this = $(this); 

    // fix tinymce bug 
    if ($this.is('[required]')) { 
     options.oninit = function(editor) { 
      $this.closest('form').bind('submit, invalid', function() { 
       editor.save(); 
      }); 
     } 
    } 

    tinymce.init(options); 
}); 

निर्माता को बहुत धन्यवाद, यह आश्चर्य की तरह काम किया :)