tinyMCE 4.x – restore default formatting after inserting html

4 Views

I created an initial version of a plugin for inserting footnotes in tinyMCE, basing on some resources that I found for WordPress and Drupal. Here’s the code: 

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
    });
});

the plugin basically works:

Read More

enter image description here

the problem is that the following inserted text is inserted as <sup> too:

enter image description here

So the desired behaviour would be:

  • put the cursor immediately after the inserted html;
  • restore original formatting.

Any suggestion/help on how to achieve that?

Thanks

Post Views: 4

Related posts