Xác thực mẫu TinyMCE và HTML5

Question

Tôi đang sử dụng TinyMCE trong ứng dụng Rails. Trong biểu mẫu của tôi, tôi có trường "mô tả" với TinyMCE và trường này là bắt buộc để xác thực biểu mẫu.

Nhưng khi tôi cố gắng gửi biểu mẫu của mình, tôi không thể, vì xác thực biểu mẫu HTML5. Trình duyệt của tôi (Chrome và Firefox) cho tôi biết rằng trường này trống. Và tôi có một vấn đề khác. Khi Chrome hiển thị hộp thoại cho trường trống, nó xuất hiện trên đầu trang của tôi, không phải gần trường biểu mẫu của tôi.

Answer 1

tôi đã sử dụng "OnInit" tùy chọn trong textareas và làm việc:

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

Bạn có thể thử sử dụng onChange sự kiện, nhưng nó không hoạt động đúng trong Firefox.

mã hoàn chỉnh của tôi:

$('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

FF xuất hiện một bong bóng cho fileld yêu cầu nhưng tại địa điểm sai, Chrome ném một lỗi bởi vì nó không thể tìm thấy lĩnh vực để hiển thị bong bóng .. Vì vậy, giải pháp của tôi là vô hiệu hóa màn hình : không có kiểu nào được đặt bởi TinyMCE và giảm kích thước trường và làm cho khả năng hiển thị của nó bị ẩn. Trình duyệt này sẽ hiển thị bong bóng bên cạnh trường này vì trường này nằm bên cạnh người dùng trình soạn thảo TinyMCE sẽ biết trường nào bị thiếu.

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

tôi mất @lucaswxp mã và thay đổi nó một chút, bởi vì Firefox đã ném một lỗi ($ this.is không phải là một chức năng, nếu tôi nhớ nó chính xác). Ngoài ra tôi đã thay đổi cách thức mà nó bắn mã từ:

$this.tinymce(options); 

tới:

tinymce.init(options); 

Full mã:

$(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); 
}); 

Rất cám ơn đến tác giả, nó làm việc như ngạc nhiên :)