Question

如何在与自定义指令一起使用时验证angularjs ckeditor

app.directive('ckeditor', function($timeout) {
return {
  require: '?ngModel',
  link: function(scope, elm, attr, ngModel) {
    var ck = CKEDITOR.replace(elm[0]);
    if (!ngModel) return;
    ck.on('instanceReady', function() {
      ck.setData(ngModel.$viewValue);
    });

    function updateModel() {
      $timeout(function () {
        scope.$apply(function() {
          ngModel.$setViewValue(ck.getData());
        });
      })

    }
    ck.on('change', updateModel);
    ck.on('key', updateModel);
    ck.on('dataReady', updateModel);

    ngModel.$render = function(value) {
      ck.setData(ngModel.$viewValue);
    };
  }
};});

以html格式，

 <textarea ng-model="product.long_description" name="content" id="content" ckeditor required></textarea>

提交时未按要求验证。

那么如何验证这种形式？

Answer 1

您可以使用jQuery简单地使用它。

<html lang="en">
<head>
    <title>Jquery - ckeditor required field validation</title>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
</head>
<body>

<div class="container text-center">
    <form>
        <textarea name="editor"></textarea>
        <button>Submit</button>
    </form>
    <script>
        CKEDITOR.replace( 'editor' );
        $("form").submit( function(e) {
            var messageLength = CKEDITOR.instances['editor'].getData().replace(/<[^>]*>/gi, '').length;
            if( !messageLength ) {
                alert( 'Please enter a message' );
                e.preventDefault();
            }
        });
    </script>
</div>  

</body>
</html>

如需演示，请访问http://demo.itsolutionstuff.com/demo/demo-ckeditor-required-field-validation-example-in-jqueryexample.html。

验证angularjs ckeditor

1 个答案: