'setAttribute' of undefined

[ashishtilara]

I am building a wizard and editor comes on 2nd page, so if someone tries to access 2nd page, I have code to move to step1 like $location.path("/step1"); but I get

Uncaught TypeError: Cannot read property 'setAttribute' of undefined

in aria function of tinymce at following line:

elm.setAttribute(name == 'role' ? name : 'aria-' + name, value);

Appreciate any help to fix this.

cheers

[deeg]

Can you please post a Plunker reproducing the issue so we can better look into fixing it?

[ashishtilara]

here we go, http://embed.plnkr.co/Dtm6nkf9cutEwOiXuQc5/

If you click on step 2, it should go to step1 but will show that error

[deeg]

Oh this is an error in TinyMCE code. I will take a look to see if this is being caused by our library.

[ashishtilara]

Yeah, the error is only happening when the rendering process is half way and the template/route changes.

[clonitza]

A workaround until a fix comes, add/remove event handlers as needed, I'm using ui router in my app:

var locationChangeStartHandler = $scope.$on("$locationChangeStart", function(event){
    event.preventDefault();
});

var stateChangeStartHandler = $scope.$on("$stateChangeStart", function(event){
    event.preventDefault();
});

tinymceOptions = {
    setup: function (editor) {
        editor.on("init", function () {
            /* Editor needs to be fully rendered to the page before removing the event handlers.
            Fiddle with the timeout value if needed. */
            $timeout(function(){
                locationChangeStartHandler();
                locationChangeStartHandler = null;
                stateChangeStartHandler();
                stateChangeStartHandler = null;
            },500);
        });
    },
    ...
}

If you find other ways to remove the handlers without using the timeout please do tell.

[RangaKom]

I am getting "locationChangeStartHandler is not a function" Error

[KreepN]

I'm in the same boat as the original poster that I am using ui-tinymce in a wizard that contains multiple states ( using "ui.router"). It would seem that this is still an issue, although one affecting a minority of people. Is there anyway to prevent the directive from resolving if it is aware of a state change on progress?

[dfabreguette]

+1

[jelgblad]

+1

[scottieslg]

Changing this code fixed it for me:

function ensureInstance() {
    if (!tinyInstance) {
        tinyInstance = tinymce.get(attrs.id);
    }
}

to:

function ensureInstance() {
    if (!tinyInstance) {
        $timeout(function() {
            tinyInstance = tinymce.get(attrs.id);
        });
    }
}

[gyulakrizsma]

Changing this part of the tinymce.js:

if (tinyInstance && !tinyInstance.settings.readonly) {
    tinyInstance.getBody().setAttribute('contenteditable', true);
}

to:

if (tinyInstance && !tinyInstance.settings.readonly && tinyInstance.getDoc()) {
    tinyInstance.getBody().setAttribute('contenteditable', true);
}

solved the issue for me.

[deeg]

@gyulakrizsma's change should already be in the latest release. Going to close this as should not be an issue any more. Please let me know if you are still seeing issues with latest version and we can re-open.