Emidomh Emidomh - 2 years ago 712
AngularJS Question

How to add HTML tags in Summernote using custom button?

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 Source

Found the solution myself :

      var node = document.createElement('span');
      node.innerHTML = "<iframe src=\""+myUrl+ "\"" + "></iframe>"</iframe>";
      context.invoke('editor.insertNode', node);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download