TinyMCE cursor move

Question

I would like to write a tinyMCE plugin that allows nesting of sub and soup tags.

Right now I wrote a command that embeds the original HTML 'in the cursor when you press the button / press the shortcut keys. However, this will only work if I can move the cursor to the middle of the new tag.

I can not find any documentation on how to move the cursor. There are some hacks offered, but they are very hacks. It can not be that hard, because, as I understand it, so work the buttons [b]and [i].

Is there a better way to do this? How can I write a tinyMCE function that puts the user in "sub mode" or "sup mode" and allows them to embed the "sub" and "sup" modes?

Thank!

Answer 1

This function will position the cursor on the specified html element.

// sets the cursor to the specified element, ed ist the editor instance
// start defines if the cursor is to be set at the start or at the end
setCursor: function (ed, element, start) {

    var doc = ed.getDoc();
    if (typeof doc.createRange != "undefined") {
        var range = doc.createRange();
        range.selectNodeContents(element);
        range.collapse(start);
        var win = doc.defaultView || doc.parentWindow;
        var sel = win.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof doc.body.createTextRange != "undefined") {
        var textRange = doc.body.createTextRange();
        textRange.moveToElementText(element);
        textRange.collapse(start);
        textRange.select();
    }
},

To nest sups, you need to make sure that sups and subs can be nested. Please check the extended_valid_elements and valid_elements configuration parameter, sub and sup cannot be nested by default! You need to rewrite this part of the rule set.