sanitize text input from textangular

Question

I'm working with textangular as a rich text solution for a project I am working on.

It is required to sanitize this input because we only allow certain html tags.

Since this is not a default possibility of textangular I created a directive that wraps around the textangular directive. I can successfully sanitize the input text, but the view is never updated, and I have ran out of ideas how to achieve this

directive:

.directive('chTextAngular',  function(){

    return {
      restrict: 'E',
      require: 'ngModel',
      template: function(elements, attributes) {
        return '<div text-angular ng-model="' + attributes.ngModel + '" id="' + attributes.id + '"></div>';
      },
      link: function(scope, element, attributes, ngModel) {
        scope.$watch(attributes.ngModel, function(n, o) {
          if(n !== undefined) {

            // Replace all the divs with <br> tags
            var sanitized = ngModel.$viewValue.replace(/<div>/gm, '<br>').replace(/<\/div>/gm, ' ');
            sanitized = sanitized.replace(/<p>/gm, '').replace(/<\/p>/gm, '<br><br>');

            sanitized = $.htmlClean(sanitized, {
              allowedTags: ["strong", "em", "ul", "ol", "li", "a", "b", "i", "br"],
              allowedAttributes: ["a", "href"]
            });

            console.log(sanitized);

            ngModel.$setViewValue(sanitized);

          }
        });
      }
    }
});

The log prints out the model and it shows that it is actually change. I just can not figure out how to update the actual textarea in textangular.

Can anyone help me with this, or put me in the right direction?

I hate to comment on an old post, but did you ever manage to get around this issue? I have the same problem, and after following @Simeon Cheeseman's instructions I still couldn't get it to work. Both methods (updateTaBindtaTextElement and refreshEditor) are called however the view still hasn't updated. — Mark
– Mark, Commented Jun 23, 2015 at 5:58

Simeon Cheeseman · Accepted Answer · 2014-09-21 23:00:30Z

Ok, first question I have to ask is; do you really need the view to update or can it be fine as it is if the model is the correct data.

Second, you should probably be registering your function via ngModel.$parsers.push(function(n,o){...}) to avoid extra watchers.

The reason it's not updating is that we have a catch in textAngular to prevent the model from updating the view while someone is typing. If you do this while the field is focussed then you get an issue with the cursor moving back to the start/end of the text field. If you do want to update the view from the model then register an blur event handler (element.on('blur', ...);) and call scope.updateTaBindtaTextElement() may work depending on which scope your directive attaches to. If that function doesn't work you'll have to add a name attribute to your textAngular element and then use the textAngularManager.refreshEditor(name); function.

Collectives™ on Stack Overflow

sanitize text input from textangular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related