CODEWITHSUNDEEP
angulartinymce
Nimit Joshi
Nimit Joshi

Reputation: 1046

How to bind click or keydown event in tinymce editor

I am using tinymce editor in angular 4. i want to bind click or keydown event, if any user clicks inside the editor. I've tried the following code but no luck:

HTML:

<app-tinymce [(ngModel)]="Model.Description" required name="Description" #Description="ngModel"></app-tinymce>

JS Page:

$('body iframe').load(function(){
$('body iframe').contents().find('input').bind('click',function(e) {
       alert('bingo?');
    });
});

 $(document).on("keydown", function(){         
    $("iframe").load(function(){
    $(this).contents().on("click, keydown", function(){
        alert("Click detected inside iframe.");
    });
  });
});

Please advise in this.

Upvotes: 1

Views: 2434

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13726

You can add code to your TinyMCE configuration that will be triggered when someone clicks or presses a key in the editor.

This TinyMCE Fiddle shows the end result: http://fiddle.tinymce.com/Rzgaab/1

It will console.log a message on click and keydown events. The key code in the TinyMCE configuration is:

setup: function (editor) {
  editor.on('click keydown', function (e) {
    console.log('Click or keydown event triggered!');
  });
}

Which triggers code on the two events you reference. A full list of events is here: https://www.tiny.cloud/docs/advanced/events/

Upvotes: 3

mp92
mp92

Reputation: 92

I saw in the Tinymce API : https://www.tiny.cloud/docs/api/tinymce/root_tinymce/

there is on() method, have you tried it?

Upvotes: 0

Related Questions