如何使用 bootstrapvalidation 验证 CKEditor？

Question

将 CKEditor 4.5.6 与 bootstrapvalidator 0.5.2

结合使用

我按照网站 http://formvalidation.io/examples/ckeditor/ 中的示例进行操作，但无法使其生效。

还在 Chrome 浏览器中出现 JavaScript 控制台错误（其他浏览器未检查）为：

Uncaught TypeError: Cannot read property 'getEditor' of undefined

以上错误仅在表单提交时显示。 PHP 使用 $.load(...) 加载表单并使用 $.post(...)

发布

Note:- I couldn't simulate error in JSFiddle. I want to validate CKEditor using bootstrapvalidator

在 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

你的方法有几个错误。

您不需要在 textarea 上启动 CKEditor，bootstrapValidator 会为您完成。
你需要 excluded: [':disabled'], 而不是 ignore: [':disabled'],
if (value === '') {return true;} 内部值检查 callback 您在 bootstrapValidator 中使用的函数，不需要它。

备注：

formValidation 和 bootstrapValidator 是两个不同的插件，因此一个插件代码参考在另一个插件中不起作用
您必须使用 CKEditor v4.2 或更高版本（您已经在使用）

这是工作验证代码，CKEditor 和 bootstrapvalidator

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

Working Fiddle Example

如何使用 bootstrapvalidation 验证 CKEditor？

How to Validate CKEditor with bootstrapvalidation?

javascript

jquery

html

ckeditor

bootstrapvalidator