0

与CKEditor 4.5.6_bootstrapvalidator 0.5.2

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

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

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

以上错误仅在表单提交时显示。$.load(...)使用加载和发布的PHP 表单$.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>

4

2 回答 2

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();
于 2015-12-24T12:59:52.317 回答
0

您的方法中有几个错误。

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

笔记：

  1. formValidation 和 bootstrapValidator 是两个不同的插件，所以一个插件代码参考在另一个插件中不起作用
  2. 您必须使用CKEditorv4.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');
    });
});

工作小提琴示例

于 2015-12-24T23:41:38.190 回答