CKEditor с jquery.validate

Question

У меня было несколько текстовых полей на странице, которые использовали jquery.validate.Я добавил CKEDITOR к этим текстовым областям, и теперь тестеры жалуются, что, когда они делают ошибку, валидатор предупреждает их, что есть ошибка (потому что я делаю updateElement для редакторов перед его вызовом), но текстовые области не получаюткрасная граница больше.Есть ли способ это исправить?Есть ли способ найти экземпляр CKEDITOR в функции errorPlacement?

Answer 1

Я обнаружил, что я ошибаюсь не тем деревом, используя errorPlacement. Вместо этого я добавил функцию выделения и отмены выделения:

      errorPlacement: function(error, element)
      {
        $(element).parent('div').prev().append(error[0]);
      },
      highlight: function(element, errorClass, validClass)
      {
        $(element).parent().addClass(errorClass).removeClass(validClass);
      },
      unhighlight: function(element, errorClass, validClass)
      {
        $(element).parent().addClass(validClass).removeClass(errorClass);
      }

Answer 2

Это должно решить проблему:

jQuery(function($){
  $("#cms-form").validate({
    event: 'blur',
    rules: {
      title: {required: true},
      content: {
        required: function(textarea) {
          CKEDITOR.instances[textarea.id].updateElement(); // update textarea
          var editorcontent = textarea.value.replace(/<[^>]*>/gi, ''); // strip tags
          return editorcontent.length === 0;
        }
      }
    }
  });
});

Answer 3

Посмотрите на эти ответы:

• Использование jQuery для извлечения контента из iframe CKEditor
• с использованием CKEditor с плагином проверки jQuery не работает

По сути, вы будете делать что-то вроде следующего:

<script type="text/javascript">
function validate_editor() {
    CKEDITOR.instances.content.updateElement();
}
</script>

Answer 4

Ckeditor скрывает текстовую область (display:none) и заменяет ее на iframe с редактируемым содержимым.Я думаю, вы должны попытаться разрешить валидации функцию, которая дает iframe красную рамку, если она недействительна.

Я написал небольшой рабочий пример здесь: http://jsfiddle.net/5wJVu/1/ (работает в Firefox, но я отключил поддержку cke-IE для этого небольшого примера, поэтому может не работать в IE ...)

 $("#submit").click(function(){
     for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();// to update the textarea
     }
     // setTimeout to let the validation complete first 
     // and then check for the .error classname.
     setTimeout(function(){
         var ta=$("#ckeditor");
         var cke=$("#cke_ckeditor");
         if (ta.hasClass('error') ){cke.addClass('error')}
         else{cke.removeClass('error')}
     },300);
     return true;
});