CODEWITHSUNDEEP
angularjstinymce
JensB
JensB

Reputation: 6880

TinyMCE in Angular errors with cant access body and $sce

I'm trying to get Tiny MCE to work in angular and having less than stellar success with it.

Currently I cant get past this error:

Unable to get property 'body' of undefined or null reference

I even tried to just get a basic fiddle running with it but failed at that too. http://jsfiddle.net/m0z0n6dL/

As far as I understand all you need is the tinymce-angular script and then decorate your textbox with <textarea ui-tinymce="tinymceOptions" ng-model="text" type="text"><textarea>

and to include it in the module

var myApp = angular.module('myApp', ['ui.tinymce']);

But this is failing on:

Unknown provider $sceProvider <- $sce <- uiTinymceDirective

If anyone could show me a simple example using CDNs for angular and tinymce dependencies I would be really happy.

Upvotes: 1

Views: 385

Answers (1)

developer033
developer033

Reputation: 24894

Well, it seems you MUST instantiate your module as ui.tinymce, otherwise it doesn't work.

Here's an example:

angular.module('ui.tinymce')
  .controller('mainCtrl', function($scope, $sce) {
    $scope.updateHtml = function() {
      $scope.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
    };
  });
<!DOCTYPE html>
<html ng-app="ui.tinymce">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/angular-ui/ui-tinymce/master/src/tinymce.js"></script>
</head>
<body ng-controller="mainCtrl">
  <form method="post">
    <textarea ui-tinymce
      ng-model="tinymce"
      ng-change="updateHtml()"></textarea>
  </form>
  <div ng-bind-html="tinymceHtml"></div>
</body>

</html>

Note: The example above won't compile well because the stacksnippets is blocking the url of tinymce.

You can see the full demo here without errors.

Upvotes: 1

Related Questions