如何使用 bootstrapvalidation 验证 CKEditor？

Question

将CKEditor 4.5.6 与bootstrapvalidator 0.5.2 一起使用

我按照网站http://formvalidation.io/examples/ckeditor/ 的示例进行操作，但无法验证。

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

未捕获的类型错误：无法读取未定义的属性“getEditor”

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

注意：- 我无法在 JSFiddle 中模拟错误。我要验证 CKEditor 使用 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

你的方法中有几个错误。

1. 您无需在 textarea 上发起 CKEditor，bootstrapValidator 将为您完成。
2. 你需要excluded: [':disabled'], 而不是ignore: [':disabled'],
3. if (value === '') {return true;} 在 bootstrapValidator 中使用的 callback 函数中的值检查，不需要它。

注意事项：

1. formValidation 和 bootstrapValidator 是两个不同的插件，因此一个插件代码引用在其他插件中不起作用
2. 您必须使用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

Answer 2

希望对你有帮助

您需要使用以下 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();