将CKEditor 4.5.6与bootstrapvalidator 0.5.2
我在网站http://formvalidation.io/examples/ckeditor/上关注了示例，但无法对其进行验证。
另外，Chrome浏览器中的JavaScript控制台错误（其他浏览器未检查）为：
未捕获的TypeError：无法读取属性＆＃39; getEditor＆＃39;未定义的
以上错误仅在表单提交时显示。 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>
答案 0 :(得分：0)
我希望这会对你有所帮助
您需要使用以下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();
答案 1 :(得分：0)
你方法中的一些错误。
CKEditor，bootstrapValidator会为你做这件事。excluded: [':disabled'],而不是ignore: [':disabled'], if (value === '') {return true;}函数内的callback值检查，不需要它。备注：
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');
});
});