How to add HTML tags in Summernote using custom button?

Question

Let's use this simple example from summernote's doc :

var HelloButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/> Hello',
    tooltip: 'hello',
    click: function () {
      // invoke insertText method with 'hello' on editor module.
      context.invoke('editor.insertText', "<iframe src=\""+myUrl+ "\"" + "></iframe>");
    }
  });

  return button.render();   // return button as jquery object 
}

This code works good but it displays everything in text inside the editor like this :

<iframe src="http://............"></iframe>

And I would like that it display the iFrame itself.

Any suggestion ?

PS: I'm also using angular summernote, maybe it can help to solve the problem.

Answer 1

Found the solution myself :

      var node = document.createElement('span');
      node.innerHTML = "<iframe src=\""+myUrl+ "\"" + "></iframe>"</iframe>";
      context.invoke('editor.insertNode', node);