textAngular & Embed.ly integration

textAngular-Embed.ly-integration

<cfsavecontent variable="angEditor1">
	<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'>
	<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
	<link rel='stylesheet prefetch' href='//cdn.embedly.com/css/social.b2705afd.css'>
</cfsavecontent>
<cfhtmlhead text="#angEditor1#" />

<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js'></script>
<!--- textAngular --->
<script src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.2/textAngular-sanitize.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.2/textAngular.min.js'></script>
<!--- Embed.ly --->
<script src="<cfoutput>#application.settings.assetsdirectory#</cfoutput>scripts/angular.embedly.min.js"></script>

<script type="text/javascript">
angular.module('taMsgBodyApp', [
  'textAngular',
  'ngEmbedApp'
])

.directive ('myEmbedlyTest', function () {
  return {
    controller: function ($scope, $rootScope) {
      $scope.msgBody = '';
      $scope.urls = [];
      $scope.key = '34a6059ae12345b08eccbf49bb12345c';
      $scope.query = {maxwidth:300};

	  // Custom display function for thumbnail media snippets
      $scope.display = function() {
        if (this.type === 'error') {
      	  return false;
        }

      var title = this.title || this.url;
      if (!UTILS.none(this.description)) {
        var shortDescription = this.description.substring(0, 300);
        if (this.description.length > 300) {
          shortDescription += '...';
        }
      }
      var html = '<div class="box" id="';
      html += this.url;
      html += '">';

      // Thumnbnail image
      if (!UTILS.none(this.thumbnail_url)) {
        html += '<div class="embed-thumb"><a href="' + this.original_url + '" target="_blank">';
        html += '<img src="'+ this.thumbnail_url + '" class="thumb-image"/> </a> </div>';
        } else {
          html += '<div class="embed-thumb"><div class="thumb-blank"></div></div>';
        }

        html += '<div class="text">';

        // Title of media snippet
        html += '<div class="titleText">' + title + '</div>';

        // URL link
        html += '<div class="urlText"><a href="' + this.original_url + '" target="_blank">' + this.original_url + '</a></div>';

        // Description of media snippet, if available
        if (!UTILS.none(shortDescription)) {
          html += '<div class="descriptionText" maxlength="100">' + shortDescription + '</div>';
        }

        // Provider information
        html += '<em>Provider: ';
        html += this.provider_name ? '<a href="' + this.provider_url + '" class="provider" target="_blank">' + this.provider_name.toLowerCase() + '</a> ' : "" + '</em> </span> </div> ';

        html += '</div>';

        // Custom class name wrapped around embedded content, if specified
        if (this.options.wrapElement) {
          html = '<' + this.options.wrapElement+ ' class="' + this.options.className + '">' + html + '</' + this.options.wrapElement + '>';
        }

        this.code = html;

        if (this.options.method === 'replace') {
          this.$elem.replaceWith(this.code);
        } else if (this.options.method === 'after'){
          this.$elem.after(this.code);
        } else if (this.options.method === 'afterParent'){
          this.$elem.parent().after(this.code);
        } else if (this.options.method === 'replaceParent'){
          this.$elem.parent().replaceWith(this.code);
        }

        this.$elem.triggerHandler('displayed', [this]);
      }

      $scope.$watch('msgBody', function() {

        var msgBody = $scope.msgBody;
        var urlList = [];

        // Split message body by spaces, commas, and newlines
        var arr = msgBody.split(/[ ,\n]+/);

        // Check each "word" in message body for URL match
        for (var i = 0; i < arr.length; i++) {
          var current = arr[i];
          var n = current.search(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/);
          if (n !== -1) {
            if (urlList.indexOf(current) === -1) {
              urlList.push(current);
            }
          }
        }

        // Update url list on scope, if it has changed
        if (JSON.stringify($scope.urls) !== JSON.stringify(urlList)) {
          $scope.urls = urlList;
        }
      });
    }
  }
});

function wysiwygeditor($scope) {
	$scope.orightml = '<cfoutput>#msgbody#</cfoutput>';
	$scope.htmlcontent = $scope.orightml;
	$scope.disabled = false;
};

</script>

<div ng-controller="wysiwygeditor">
	<div text-angular="text-angular" name="msgbody" ng-model="htmlcontent" ta-toolbar="[['h1','h2','h3','h4','h5','h6'],['html'],['undo','redo'],['insertLink']]"></div>
</div>

<!--- I want this embedly functionality in the above wysiwygeditor ??? --->
<div my-embedly-test>
  <textarea ng-model="msgBody"></textarea>
  <div ng-embed-urls urls="urls" key="key" display="display"></div>
</div>