CODEWITHSUNDEEP
javascripthtmltinymce
Shaiwal Tripathi
Shaiwal Tripathi

Reputation: 617

textarea events are not working after adding tinymce 4

I am calling a function on onfocus event of a textarea and it's working fine. But after adding tinymce it stopped working.
Here is my Code
Javascript...

 <script src="tinymce/tinymce.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        tinyMCE.init({
            theme: "modern",
            mode: "exact",
            elements: "txtDescription",
            auto_focus: false,
            resize: false,
            convert_urls: false,
            menubar: false,
            paste_data_images: true,
            plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace visualblocks visualchars media nonbreaking table contextmenu template paste textcolor'],
            toolbar: "bold italic underline charmap subscript superscript table link image media, formulabutton, imagebutton",
            height: 150,
            width: 600


        });

        function ShowMessage() {
            alert("Hello");
        }

            </script>

and HTML...

<div>
      <textarea id="txtDescription" onfocus="ShowMessage()"></textarea>
    </div>

Upvotes: 4

Views: 917

Answers (3)

alexandruRobert
alexandruRobert

Reputation: 99

I found a solution in Angular 10

<!--  the text area declared in the components' html file-->
        <textarea
          class="form-control"
          id="editor"
          formControlName="contenu"
        > </textarea>


// recovering the textarea by its id inside the components' typescript file 
// important - after having initialised tinymce
   this.textEditor = tinymce.get('editor'); 

 
// adding the event to the text area   
   this.textEditor.on('change', () => {
          this.contenuModifie = true;
          console.log('changed');
        });

Upvotes: 0

Thariama
Thariama

Reputation: 50832

The problem here is that your textarea gets hidden by tinymce and will only be used by tinymce to write the tinymce content back into it if necessary.

Tinymce creates an own iframe to make it possible for users to insert/edit formatted content. You will have to bind the focus event to this iframe or better iframe body. Here is the code:

var my_editor = tinymce.get('my_editor_id'); // or tinymce.editors[0]
$(my_editor.getBody()).bind('focus', function(e){
    console.log('Tinymce body iframe has been focused.');
});

or

var my_editor = tinymce.get('my_editor_id'); // or tinymce.editors[0]
my_editor.getBody().addEventListener('focus', function() {
    console.log('Tinymce body iframe has been focused.');
});

Upvotes: 2

Rob
Rob

Reputation: 4987

This is probably because TinyMCE replaces the onFocus event. Try to bind the onFocus event after you've loaded tinyMCE. 

tinyMCE.init({
    //(...)
});
document.getElementById('txtDescription').addEventListener('focus', function() {
    alert("Hello");
});

Upvotes: 2

Related Questions