Проверка формы TinyMCE и HTML5

Я использую TinyMCE в приложении Rails. В моей форме у меня есть поле описания с TinyMCE, и это поле является обязательным для проверки формы.Проверка формы TinyMCE и HTML5

Но когда я пытаюсь представить свою форму, я не могу, из-за проверки формы HTML5. Мой браузер (Chrome и Firefox) сообщает мне, что поле пусто. И у меня другая проблема. Когда Chrome отображает диалоговое окно для пустого поля, оно отображается в верхней части моей страницы, а не рядом с моим полем формы.

источник

2011-12-22 Mathieu Mahé

Вы нашли решение для этого уже? Это: http://www.tinymce.com/develop/bugtracker_view.php?id=5671 - это расстройство. Кажется, до сих пор он еще не разрешен. – Leah

@ Ли ваша ссылка не работает. Я перенаправлен в GitHub, и нет проблемы № 5671. – naXa

@naXa Не обращайте внимания. Прошел уже год с тех пор, как я опубликовал этот комментарий/ссылку. Его можно было бы уже удалить. В любом случае, спасибо за ваш ответ. – Leah

Я использовал опцию «OnInit» в прокручиваемых и работал:

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

Вы можете попробовать использовать OnChange события, но он не работает должным образом в Firefox.

Мой полный код:

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

источник

2012-02-15 05:36:31 lucaswxp

FF показать пузырь для требуемого fileld, но в неправильном месте, Chrome выдает ошибку, потому что он не может найти поле, чтобы показать пузырь .. Так что мое решение отключить дисплей : ни один стиль не установлен 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; 
 
}

источник

2015-09-08 11:01:08 Faraz

Я взял @lucaswxp код и изменил его немного, потому что Firefox бросает ошибку ($ 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); 
});

Большое спасибо создателю, он работал как чудо :)

источник

2015-12-08 19:42:05

Проверка формы TinyMCE и HTML5

ответ

Смежные вопросы