tinyMCE 4.x - 插入html后恢复默认格式

Question

我创建了一个插件的初始版本，用于在tinyMCE中插入脚注，基于我为WordPress和Drupal找到的一些资源。这是代码：

tinymce.PluginManager.add('footnotes', function(editor) {

    function showDialog() {
        var win = editor.windowManager.open({
            title: "Add a footnote",
            id: 'footnote-dialog',
            body: {
                type: 'textbox',
                name: 'footnote',
                multiline: true,
                minWidth: 520,
                minHeight: 100,
                //style: 'direction: ltr; text-align: left'
            },
            onSubmit: function(e) {
                e.preventDefault();
                var footnote = e.data.footnote;
                if (footnote.length){
                  var html = '<span><sup class="footnote-elem" data-toggle="tooltip" data-placement="top" title="'+footnote+'">[*]</sup></span>';
                  editor.undoManager.transact(function() {
                    tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, html);
                  });
                  editor.windowManager.close();
                }
            }
        });
    }
    editor.addButton("footnotes", {
        title : 'Insert a footnote',
        image : tinyMCE.baseURL + '/plugins/footnotes/img/note_add.png',
        onclick: showDialog
    });
});

该插件基本上有效：

问题是以下插入的文本也作为<sup>插入：

所以期望的行为是：

• 将光标放在插入的html后面;
• 恢复原始格式。

关于如何实现这一目标的任何建议/帮助？

由于