TinyMCE move caret after inserting span

Viewed 1662

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 &#32; (whitespace) at the end (<span>test</span>&#32;) 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 &#32; when reinserting?

1 Answers
Related