CODEWITHSUNDEEP
tinymceangular-ui
Matt M
Matt M

Reputation: 3779

Using angular-ui and tinymce

I'm trying to use the angular-ui tinymce directive. I used Nuget to get the angular-ui (v 0.4.0), tinymce.jquery (v 4.0.6), and tinymce (v 4.0.6)packages. I added the ui directive to my angular module and referenced the following scripts (in order) on my page: 

  <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/tinymce/tinymce.min.js"></script>
    <script src="Scripts/tinymce/jquery.tinymce.min.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="Scripts/angular-ui.min.js"></script>

When I navigate to the partial that contains the textarea that I decorated with ui-tinymce ng-model="tinymce", I can see the error (angular.min.js) listed in my title in Chrome's javaScript console.

I've searched the web and tried suggestions such as changing the listing of the script references, but nothing I've tried works. Am I missing a key component, do I have incorrect references (or out of order), or something else? I've come accross some fiddles, but most are broken or down. I haven't yet seen one that gives a working demo that I can use.

EDIT: Ok, now I'm getting the error: "Cannot call method 'Add' of undefined" at angular-ui.min. I didn't change anything in the code, so it's possible that the original error message was from a previous attempt?

Upvotes: 2

Views: 3110

Answers (1)

Mark Coleman
Mark Coleman

Reputation: 40863

The error you are receving is occurring from a version mismatch between tiny-mce (4.0.6) and the angular-ui (0.40) package.

Looking at the api for 4.x for tinyMCE onSetContent() does not exist and has been replaced with .on()

It looks like ed.onSetContent() exists in TinyMCE 3.x.

With that being said if you replace the tinymce package with a 3.x version everything should now play nicely together.

Installed Packages

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Angular.UI" version="0.4" targetFramework="net45" />
  <package id="angularjs" version="1.0.7" targetFramework="net45" />
  <package id="jQuery" version="1.9.1" targetFramework="net45" />
  <package id="Select2.js" version="3.2.1" targetFramework="net45" />
  <package id="TinyMCE" version="3.5.8" targetFramework="net45" />
  <package id="TinyMCE.JQuery" version="3.5.8" targetFramework="net45" />
</packages>

Once the packages are installed you can get it all wired up with the following view:

<body ng-app="MyApp">

    <textarea ui-tinymce="" ng-model="tinymce"></textarea>
    {{tinymce}}
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui.js"></script>
    <script src="Scripts/tinymce/tiny_mce.js"></script>
    <script src="Scripts/tinymce/jquery.tinymce.js"></script>

    <script>
        var myApp = angular.module("MyApp", ["ui"])
    </script>
</body>

Working application on github

Upvotes: 2

Related Questions