I am creating a TinyMCE plugin with custom button that insert <span>test</span> in current caret position. Moreover clicking this button again while caret is in previously inserted text is removing current <span>test</span> and replacing it with new inserted <span>test</span>.
tinymce.PluginManager.add('test_plugin', function(editor) {
editor.addButton('test-button', {
text: 'Insert span',
onclick: function() {
var current_node = editor.selection.getNode();
if(current_node.tagName === 'SPAN') {
current_node.remove();
}
editor.insertContent('<span>test</span>');
}
});
});
It works great but after inserting <span>test</span> the caret get stuck in this span node and I can't move it outside of this span.
Adding   (whitespace) at the end (<span>test</span> ) solves the problem of stucking caret but it is adding redundant spaces every reinsert.
How to solve stucking caret problem?
OR
How to remove redundant   when reinserting?