onDblclick function in tinyMce 4 to edit header and footer

Question

I need to make a editable zone for my header and footer in tinymce 4. I succed to add header and footer, but i can't make a clickable zone ...

This is my code :

  setup : function(ed) {
  ed.on('init',function(e) {


     var header = "<div style= 'border-bottom:1px solid black'>HEADER</div>";
     var footer = "<div style= 'border-top:1px solid black'>footer</div>";
     var content =ed.getContent();
     content = header + content + footer;
     ed.setContent(content);
     ed.on('dblClick',function(e) {
           tinymce.activeEditor.dom.addClass('header','click-header');
  });
      });

I need to make this function quickly , but i have no idea

Answer 1

You could use something like this (using jQuery)

var header = "<div class="header" style= 'border-bottom:1px solid black'>HEADER</div>";
...
$(ed.getBody()).find('.header').bind('click', function(){
    alert('Header clicked.');
});