0

CKEditor 4.5.6との使用bootstrapvalidator 0.5.2

ウェブサイトhttp://formvalidation.io/examples/ckeditor/の例に従いましたが、検証できませんでした。

また、Chrome ブラウザーで JavaScript コンソール エラーが発生します (他のブラウザーはチェックしませんでした)。

キャッチされていない TypeError: 未定義のプロパティ '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

あなたのアプローチのいくつかの間違い。

  1. テキストエリアで開始する必要はありませんCKEditor。bootstrapValidator がそれを行います。
  2. あなたはする必要はありexcluded: [':disabled'],ませんignore: [':disabled'],
  3. if (value === '') {return true;}あなたがbootstrapValidatorで使用している関数内の値チェックcallback、それは必要ありません。

ノート：

  1. formValidation と bootstrapValidator は 2 つの異なるプラグインであるため、1 つのプラグイン コード参照は他のプラグインでは機能しません
  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 に答える
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 に答える