如何使用自定义按钮在 Summernote 中添加 HTML 标签？答案

【问题标题】：How to add HTML tags in Summernote using custom button?如何使用自定义按钮在 Summernote 中添加 HTML 标签？
【发布时间】：2016-10-07 06:49:38
【问题描述】：

让我们使用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 
}

此代码运行良好，但它在编辑器中以文本形式显示所有内容，如下所示：

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

我希望它显示 iFrame 本身。

有什么建议吗？

PS：我也在用有角度的summernote，也许它可以帮助解决问题。

【问题讨论】：

标签： javascript angularjs summernote

【解决方案1】：

自己找到了解决方案：

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

【讨论】：