CODEWITHSUNDEEP
tinymcewysiwyg
Fabien Piron
Fabien Piron

Reputation: 209

tinymce readonly mode event not firing

I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.

So far i have been able to get the selected node in tinymce by using the onnodechange event 

setup: function(ed) {
            ed.on('NodeChange', function(e){
                console.log(e.element);
            });
        }

but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?

Upvotes: 3

Views: 747

Answers (2)

Matteo Nardi
Matteo Nardi

Reputation: 328

I had a similar problem, but we needed to intercept the click event, not "NodeChange".

I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.

bodyEl.addEventListener('click', function(e) {
  console.log('Hello ', e.target);
}, false)

If you need to detect selection change, you could use the 'select' event.

Upvotes: 3

Fabien Piron
Fabien Piron

Reputation: 209

I have found a workaround by adding the following inside setup callback

//prevent user to edit content inside tinymce
    ed.on('PostRender', function(e){
        ed.getBody().setAttribute('contenteditable', false);
    });

    ed.on('KeyPress', function(e){
        e.preventDefault();
        e.stopPropagation();
    });

It's not perfect, but at least, it does the trick ;)

Upvotes: 4

Related Questions