Stuck with Angular-UI TinyMce

Question

I'm trying to use the Angular-UI TinyMCE directive in my Angular app.

What happens is, I query an endpoint, it returns an array of objects. I have a function that then converts that to a long string with HTML tags in it. Then that data is set to a $scope.tinymceModel

This all works fine. I can console.log($scope.tinymceModel) and its the proper data.

The problem is the HTML parse function needs to run after the endpoint query is returned. So I've called the function inside the .success() callback. For some reason when I set the $scope.tinymceModel inside of the callback the TinyMCE directive ignores it. Even if I make it $scope.tinymceModel = 'test' but if I place $scope.tinymceModel = 'test' outside of the callback it shows up in tinymce just fine.

This tells me that for some reason when the TinyMCE directive is loaded it needs the tinymceModel to already be populated with data. I'm not sure how I get around this.

This also tells me that I may have another problem after this. The next task with TinyMCE is the user can then edit the text, click a button and the app will send a POST with the updated info inside tinymceModel If this was a regular text box it would be simple because of the data-binding. However it seems TinyMCE doesn't play well with databinding.

Any ideas?

Answer 1

Figured it out!, the issue has to do with a bug in the TinyMCE Directive. By default there is no priority set. Setting it to a value of 1 or higher fixes it. It seems that the current version of Ui-TinyMCE Directive has this fixed, but the version I pulled down less than a month ago didn't have it fixed.

Answer 2

I've attempted to recreate what you're describing (substituting $http with $timeout) to no avail. Here's my solution and it seems to be working just fine.

HTML:

<div ng-controller="MainCtrl">
  <textarea ui-tinymce="" class="form-control" ng-model="someHtml"></textarea>
</div>

JavaScript:

angular.module('testTinymceApp')
  .controller('MainCtrl', function ($scope, $timeout) {
    $timeout(function() {
      $scope.someHtml = '<h1>HELLO THERE</h1>'
    }, 7000);

    // This does the same thing with an XHR request instead of timeout
    // $http.get('/some/data/').success(function(result) {
    //   $scope.someHtml = '<h1>HELLO THERE</h1>'
    // });
  });

I thought maybe you could compare with your own application? I know for a fact that this works with XHR requests. I'm building a CMS at work that uses what I assume is an identical workflow.

The someHtml attribute in this snippet will also be valid HTML under the covers, so sending it back in a POST request should be extremely easy.

If this is not sufficient, please provide further explanation.