how to strip placeholder img in textAngular editor in scope var?

I’m using TextAngular directive in an app with Angular. When I insert a youTube link (through the toolbar button) it shows a placeholder image in the editor. I wish to save all the html in a $scope var but without the placeholder html. Currently I get something like this if I output the $scope var which is bound to the editor (ng-model):

"<p><img class="ta-insert-video" ta-insert-video="http://www.youtube.com/embed/cUeMF18zA4Y" src="" allowfullscreen="true" width="300" frameborder="0" height="250"/></p>"

What I really want is this:

"<p><iframe src="https://www.youtube.com/embed/cUeMF18zA4Y" allowfullscreen="true" width="300" frameborder="0" height="250"></iframe></p>"

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Two solutions.

  1. If you’re just outputting it on the screen, use ta-bind ng-model="html" instead of ng-bind-html="html". That calls the custom renderers that convert it to the iframe syntax.

  2. If you’re sending it back to the server and don’t want it stored as the placeholder Inject ‘taApplyCustomRenderers’ into your controller and use it as such: htmlToServer = taApplyCustomRenderers($scope.htmlValue);.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply