JSFiddle + TinyMCE + AngularJS

Question

I'm experiencing an issue trying to use tinymce API inside an angular directive in JSFiddle. Here is the example The tinymce editor is initialised just fine, there's no errors in browser console. But I get 'undefined' if I try to get an instance of the tinymce Editor. The question is: why does tinymce.get(id); result in undefined?

HTML:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <my-editor ng-model="text"></my-editor>
    </div>
</div>

JS:

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

app.controller('MainCtrl', function($scope) {

});
app.directive('myEditor', function () {
    var uniqueId = 0;
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: true,
        template: '<textarea></textarea>',
        link: function (scope, element, attrs, ngModel) {
            var id = 'myEditor_' + uniqueId++;
            element.find('textarea').attr('id', id);
            tinymce.init({
                selector: '#' + id
            });

            var editor = tinymce.get(id);
            alert(editor); **// why is this undefined?**
        }
    }
});

I've also played with options in Frameworks & Extensions section of JSFiddle. But with no success.

possible duplicate of Wait for TinyMCE to load

Flint
– Flint

2014-11-28 01:51:57 +00:00
Commented Nov 28, 2014 at 1:51 — Flint
– Flint, Commented Nov 28, 2014 at 1:51

Mark Coleman · Accepted Answer · 2013-07-08 14:34:16Z

2

You are dealing with the issue, where the elements have not been appended to the dom when you are doing your alert. (look at the html in firebug)

<my-editor ng-model="text" class="ng-scope ng-pristine ng-valid">
    <textarea id="myEditor_0"></textarea>
</my-editor>

Placing the alert inside of a setTimeout will allow you to alert() the object.

setTimeout(function(){
     var editor = tinymce.get(id);
     alert(editor); // why is this undefined?
},0);

answered Jul 8, 2013 at 14:34

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Flint · Accepted Answer · 2014-11-28 02:16:33Z

1

The proper way to go is to set the init_instance_callback option in tinyMCE.init or in tinymceOptions if you are using angular-ui-tinymce :

$scope.tinymceOptions = {
  init_instance_callback : function(editor) {
     MyCtrl.editor=editor
     console.log("Editor: " + editor.id + " is now initialized.");
     editor.on('Change', function(editor, e) {
        MyCtrl.func()
     });             
}

answered Nov 28, 2014 at 2:16

Flint

1,7221 gold badge20 silver badges30 bronze badges

1 Comment

rohanagarwal Over a year ago

thanks a lot, browsing the internet about fetching this editor in angular to call uploadImages function on it and spent huge time on it

Thariama · Accepted Answer · 2013-07-25 11:05:47Z

0

Additionally to the answer Mark gave:

You will need to wait for the editor to get initalized and ready to be usable. For this you may use the onInit tinymce handler. onInit gets fired when the editor is ready.

answered Jul 25, 2013 at 11:05

Thariama

50.9k13 gold badges146 silver badges175 bronze badges

Collectives™ on Stack Overflow

JSFiddle + TinyMCE + AngularJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related