TinyMCEはスパンを挿入した後にキャレットを移動します

Question

<span>test</span>を現在のキャレット位置に挿入するカスタムボタン付きのTinyMCEプラグインを作成しています。さらに、以前に挿入されたテキストにキャレットがある間にこのボタンを再度クリックすると、現在の<span>test</span>が削除され、新しいものが<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>'); 
     } 
    }); 
}); 

それは素晴らしい作品が、<span>test</span>を挿入後キャレットは、このスパンのノードで動けなくなると、私は、このスパンの外に移動することはできません。

末尾に （空白）を追加すると、スタックの問題が解決しますが、再挿入するたびに冗長なスペースが追加されます。

スタックキャレットの問題を解決するにはどうすればよいですか？

OR

再挿入するときに冗長 を削除する方法？

Answer 1

Hmm、wierd。 スパンを挿入した後にキャレットをリセットすることができます。これは役に立ちます。

この形式でスパンを挿入してください。<span id="my_new_span">test</span>

var my_span = ed.getBody().querySelector('#my_new_span'); 
ed.selection.select(my_span); 
ed.selection.getRng(1).collapse(0); 

// remove the id attribute 
my_span.removeAttribute("id");