javascript - Angular: How to utilize Linky with contenteditable div -
i trying add clickable link contenteditable div of linky.
ng-bind-html = "model | linky"; i haven't been able make work ng-sanitize escapes links. here think happens:
- text entered " http://something.com "
linkywraps<a href="http://something.com">http://something.com</a>ngsanitizeescapes again potentially breakinglinky'simplementations
how can make work such links added div clickable , not escaped html? plunker
html:
<body ng-app="customcontrol"> <h4>how add link contenteditable div?</h4> <div contenteditable name="mywidget" ng-bind-html="usercontent" ng-model="usercontent" strip-br="true" required>change me </div> <span ng-show="myform.mywidget.$error.required">required </span> <hr> model: <p aria-label="dynamic textarea">{{usercontent}}</p> </body> js code:
app.directive('contenteditable', ['$sce','$filter', function($sce,$filter) { return { restrict: 'a', // activate on element attribute require: '?ngmodel', // hold of ngmodelcontroller link: function(scope, element, attrs, ngmodel) { if (!ngmodel) return; // nothing if no ng-model // specify how ui should updated ngmodel.$render = function() { element.html( $sce.gettrustedhtml(ngmodel.$viewvalue || '')); }; // listen change events enable binding element.on('blur keyup change', function() { scope.$evalasync(read); }); read(); // initialize // write data model function read() { var html = element.html(); // when clear content editable browser leaves <br> behind // if strip-br attribute provided strip out if ( attrs.stripbr && html == '<br>' ) { html = ''; } ngmodel.$setviewvalue(html); } } }; }]); update:
currently, solving issue of autolinker
replace -
ngmodel.$setviewvalue(html); with
var autolinked = autolinker.link(html, "_blank"); ngmodel.$setviewvalue(autolinked); check out plunker
Comments
Post a Comment