Question

我试图在linky的帮助下添加一个可点击的链接到contenteditable div。

ng-bind-html = "model | linky";

我无法通过ng-sanitize逃脱链接来使其工作。以下是我的想法：

输入的文字为＆＃34; http://something.com＆＃34;
linky将其包装为<a href="http://something.com">http://something.com</a>
ngSanitize再次逃脱此问题可能导致linky's实施

如何使其工作，以便添加到div的链接可以点击而不是转义html？ PLUNKER

HTML：

<body ng-app="customControl">
    <h4>How to add link to 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代码：

app.directive('contenteditable', ['$sce','$filter', function($sce,$filter) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html( $sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if ( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

更新：

目前，我正在AutoLinker

的帮助下解决这个问题

替换 -

ngModel.$setViewValue(html);

使用

var autoLinked = Autolinker.link(html, "_blank");
ngModel.$setViewValue(autoLinked);

查看PLUNKER

Angular：如何利用Linky与contenteditable div

0 个答案: