如何使用bootstrapvalidation驗證CKEditor？

Question

將CKEditor 4.5.6與bootstrapvalidator 0.5.2

我遵循了來自網站http://formvalidation.io/examples/ckeditor/的示例，但是無法對其進行驗證。

在Chrome瀏覽器中（其他瀏覽器未檢查）也在JavaScript控制台錯誤中顯示為：

未捕獲的TypeError：無法讀取未定義的屬性'getEditor'

上述錯誤僅顯示在表單提交中。 PHP表單使用$.load(...)加載並使用$.post(...)

注意：-我無法在JSFiddle中模擬錯誤。 我想使用bootstrapvalidator驗證CKEditor

在JSFiddle中添加了完整代碼https://jsfiddle.net/nxxxbw90/4/

 var editor; $(document).ready(function(){ editor=CKEDITOR.replace('policyta', { removePlugins: 'sourcearea' }); $('#setpolicyform').bootstrapValidator({ message: 'This value is not valid', ignore: [':disabled'], feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { policyta: { group: '.lnbrd', validators: { notEmpty: { message: 'The Guidelines is required and cannot be empty' }, callback: { message: 'The Guidelines must be less than 50000 characters long', callback: function(value, validator, $field) { if (value === '') { return true; } var div = $('<div/>').html(value).get(0), text = div.textContent || div.innerText; return text.length <= 50000; } } } } } }).on('success.form.bv', function(e){ e.preventDefault(); e.stopImmediatePropagation(); var $form = $("#setpolicyform"), $url = $form.attr('action'); $.post($url,$form.serialize()).done(function(dte){ $("#policy-content").html(dte); loadfunctions(); }); }); editor.on('change', function(ev){ $("#setpolicyform").bootstrapValidator('revalidateField', 'policyta'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.css" rel="stylesheet"/> <script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="policy-content"> <form role="form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="setpolicyform" id="setpolicyform"> <div class='box-body pad'> <div class="form-group"> <div class="lnbrd"> <textarea class="form-control textarea" name="policyta" id="policyta" style="width: 100%; height: 400px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea> </div> </div> </div> <div class="box-footer clearfix"> <button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn">SAVE</button> </div> </form> </div> 

Answer 1

希望對您有幫助

您需要使用以下ckeditor版本（我不確定它是否適用於更高版本）。

<script src="//cdn.ckeditor.com/4.4.3/basic/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.4.3/basic/adapters/jquery.js"></script>

然后

.find('[name="policyta"]')
.ckeditor()
.editor
.on('change', function () {
    $('#yourformid').bootstrapValidator('revalidateField', 'policyta');
});

或使用以下代碼

CKEDITOR.instances.policyta.updateElement();

Answer 2

您的方法中有幾個錯誤。

1. 您不需要在textarea上啟動CKEditor ，bootstrapValidator會為您完成。
2. 您需要excluded: [':disabled'],而不要ignore: [':disabled'],
3. if (value === '') {return true;}在bootstrapValidator中使用的callback函數中進行值檢查，不需要它。

筆記：

1. formValidation和bootstrapValidator是兩個不同的插件，因此一個插件代碼參考在其他插件中將不起作用
2. 您必須使用CKEditor v4.2或更高版本（您已經在使用）

這是有效的驗證代碼，帶有bootstrapvalidator CKEditor

$(document).ready(function() {
  $('#setpolicyform').bootstrapValidator({
      excluded: [':disabled'],
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        policyta: {
          group: '.lnbrd',
          validators: {
            notEmpty: {
              message: 'The Guidelines is required and cannot be empty'
            },
            callback: {
              message: 'The Guidelines must be less than 50000 characters long',
              callback: function(value, validator, $field) {
                var div = $('<div/>').html(value).get(0),
                  text = div.textContent || div.innerText;
                return text.length <= 50000;
              }
            }
          }
        }
      }
    }).find('[name="policyta"]')
    .ckeditor()
    .editor
    .on('change', function() {
      $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
    });
});

工作小提琴示例