TinyMCE 4 get id generated for div

1

I would like to know how I can get the id that is generated for the div in tinyMCE 4.

I know it's done through the setup method, but I can not do it. I use the following:

tinymce.init({
    selector: '#selector',
    setup: function(editor){
        editor.on('init',function(e){
            console.log();
        });
    }
});

So far I have arrived. By creating a <textarea> and linking it to the tinymce, it hides the textarea and instead creates a div with an id (similar to that "mceu_X") and this id is what I want to achieve.

    
asked by El Tito Barte 21.02.2016 в 18:56
source

2 answers

1

You can directly access the tinymce object. From there you have functions with which to obtain the values of the generated object.

For example

tinymce.editors[0].iframeElement.offsetParent.id;

You can substitute the 0 for the object in question if you have multiple instances of tinymce or iterate through all of them to retrieve the ids.

    
answered by 22.02.2016 в 15:43
0

Specifically, you must do this:

tinymce.init({
  selector: '#selector',
  setup: function(editor) {
    editor.on('init', function(e) {

      // obtener el id
      var id = $('[id^="mceu_"]')[0].id;
      alert(id);
    });
  }
});

Here is a functional example: link

I do not leave it in a stack-snippet because they do not allow tinymce to be loaded by the policy of the same origin

Explanation

With jQuery you can use the ^= selector known as Start with (or startsWith).

Example:

var id = $('[id^="mceu_"]')[0].id;
alert(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="otro" />
<div id="mceu_1234" />

Explanation of the selector:

  • The [] , indicate that you want to search the attributes of the elements.
  • [id^="VAL"] lease, when the attribute id begins with the literal VAL.

On the other hand, in pure JavaScript, you can use querySelector with the same selector . Unlike JQuery that returns an array, this option returns the first element that matches.

var id = document.querySelector('[id^="mceu_"]').id;
alert(id);
<div id="otro"/>
<div id="mceu_1234"/>
    
answered by 21.02.2016 в 23:16