jomendez

 
 

I'm creating this "how to..." tutorial based on my experience working with TinyMCE Validating length with Angularjs, and the answers I found in the internet community Stack overflow and github.

What is TinyMce:

It is an opensource WYSIWYG (What You See Is What You Get) HTML editor designed to simplify website content creation. In other words it is a rich text web editor. This is the official website https://www.tinymce.com/

TinyMCE Validating length using AngularJs

For the first example I used TinyMCE v4.3.3 with angular-ui-tinymce v0.0.12 plugin and AngularJS v1.4.6.

In the AngularJs controller we have to set the config options, and in the view we use a textarea with the parameter ui-tinymce="tinymceOptions"

angular.module('myApp', ['ui.tinymce'])
.controller('myCtrl', ['$scope', function($scope) {
    
//set the config options
 $scope.tinymceOptions = {
                    plugins: 'code',
                    toolbar: 'undo redo | bold italic | styleselect | code',
                    menubar: false,
                    forced_root_block: false
                };
// ...
}]);

 
 

<textarea ui-tinymce="tinymceOptions" ng-maxlength="100" 
name="editor" ng-model="vm.editor">
</textarea>
<span ng-show="form.editor.$error.maxlength" class="error">
    100 character limit reached!
</span>

 
 
The code above will not work as it is, because of a known bug https://github.com/angular-ui/ui-tinymce/issues/145

Work around

Took from StackOverflow
One work around can be to disable SCE mode with this code .config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}])
but...

Beware of security vulnerabilities!

Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. With SCE disabled, an AngularJS application allows to render arbitrary HTML into the div, and rendering user controlled input creates security vulnerabilities.

 
 

angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}])
.controller('myCtrl', ['$scope', function($scope) {
    
//set the config options
 $scope.tinymceOptions = {
                    plugins: 'code',
                    toolbar: 'undo redo | bold italic | styleselect | code',
                    menubar: false,
                    forced_root_block: false
                };
// ...
}]);

 
 
Here is the JsFiddle https://jsfiddle.net/naXa/zsnLupvd/

Another work arround

This is a directive written by @andresmatasuares for TinyMCE Validating length with AngularJs.

app.directive('plainTextMaxLength', function($filter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attributes, ngModel) {
        var maxLength, validPlainTextLength;
        validPlainTextLength = function(v) {
          if (!v) {
            return true;
          }
          return stripHtmlTags(v).length <= maxLength;
        };
        maxLength = void 0;
        scope.$watch(attributes.plainTextMaxLength, function(newValue, oldValue) {
          if (maxLength !== newValue) {
            maxLength = newValue;
            return ngModel.$validate();
          }
        });
        return ngModel.$validators['plainTextMaxLength'] = function(modelValue, viewValue) {
          if (viewValue.$$unwrapTrustedValue) {
            return validPlainTextLength(viewValue.$$unwrapTrustedValue());
          } else {
            return validPlainTextLength(viewValue);
          }
        };
        
      }
    };
  });

 
Here you can find the plunker code http://plnkr.co/edit/oAZcHZAmCXYOTckJCPcs?p=preview