CKEditor 與 jquery.validate

Question

我在使用 jquery.validate 的頁面上有一些文本區域。 我將 CKEDITOR 添加到這些 textareas 中，現在測試人員抱怨說，當他們出錯時，驗證器會警告他們有錯誤（因為我在調用它之前在編輯器上做了一個 updateElement），但是 textareas 沒有得到不再有紅色邊框。 有沒有辦法解決這個問題？ 有沒有辦法在errorPlacement function中找到CKEDITOR實例？

Answer 1

我發現我使用errorPlacement 找錯了樹。 相反，我添加了一個高亮並取消高亮 function：

      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

Ckeditor 隱藏文本區域 ( display:none ) 並將其替換為具有可編輯內容的 iframe。 我認為您應該嘗試讓驗證觸發一個 function，如果無效，它會給 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;
});

Answer 4

看看這些答案：

• 使用 jQuery 從 CKEditor 的 iframe 中抓取內容
• 使用 CKEditor 和 jQuery 驗證插件不起作用

您實際上將執行以下操作：

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