TinyMCE 插入跨度后移动插入符

Question

我正在创建一个带有自定义按钮的 TinyMCE 插件，该按钮插入<span>test</span>当前插入符位置。此外，当插入符号位于先前插入的文本中时，再次单击此按钮将删除当前文本<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>卡在这个跨度节点中，我无法将其移出这个跨度。

 在末尾添加（空格）（ <span>test</span>&#32;）解决了插入符号卡住的问题，但每次重新插入都会添加多余的空格。

如何解决插入符号卡住问题？

或者

 重新插入时如何删除多余的？

Answer 1

嗯，听起来很奇怪。您可以尝试在插入跨度后重置插入符号。这可能会有所帮助。

在此表格中插入跨度<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");