我在tinyMCE中添加了一个自动完成器，它可以创建一个带有特定类和属性的span。我们用它来创建到工具中其他元素的链接。这些不是“a”标记，因为它不是直接的url，它是内部处理的。这工作得很好。唯一的问题是当我们编辑这些值时，span是编辑器中的最后一个条目，当用户开始键入时，文本在相同的跨度中继续，而不是开始新的跨度。
我该如何避免呢？我在设置内容时尝试在末尾添加一个空格，但没有效果（空格似乎被删除了）。这个小技巧在我插入跨度时确实有效，但可以帮助用户以“正常”格式写作。
例如，tinyMCE的内容将被设置为"I'm afraid of <span class='animal' data-animalId='animal2'>crocodile</span>"
当添加文本时，span 'animal'获取内容。我希望它在span 'animal'之外（但仍在同一行）
我会很高兴，如果跨度是从来没有附加到也。
您可以查看有关此CodePen https://codepen.io/MissChocoe/pen/OJbaWXd的工作示例
下面是完整的JS代码：

var autoCompletionValues = [
  {id: "animal1", name: "alligator"},
  {id: "animal2", name: "crocodile"},
  {id: "animal3", name: "cat"},
  {id: "animal4", name: "dog"},
  {id: "animal5", name: "horse"},
  {id: "animal6", name: "cow"}
];

var initialValue = "I'm afraid of <span class='animal' data-animalId='animal2'>crocodile</span>";

tinymce.init({
  selector: "#myTinyMCE",
  forced_root_block: false,
  content_style: ".animal { color: blue; text-decoration: underline}",
  setup: function (editor) {
    editor.ui.registry.addAutocompleter('myAutoComplete', {
      ch: "_",
      minChars: 1,
      onAction: function (autocompleteApi, rng, value, meta) {
        editor.selection.setRng(rng);
        editor.insertContent('<span class="animal" data-animalId="' + meta.id + '">' + value + '</span>' + " ");
        autocompleteApi.hide();
      },
      fetch: function (pattern) {
        return new tinymce.util.Promise(function (resolve) {
           var results = autoCompletionValues.filter(function(c) {
             return c.name.indexOf(pattern.toLowerCase()) === 0;
           }).map(function(c) {
              return { 
                type: 'autocompleteitem',
                value: c.name,
                text: c.name,
                meta: c
              };
            });
            resolve(results);
        });
      }
    });
    
    editor.on('init', function(ev) {
      editor.setContent(initialValue);
    });
  },
});