如何防止tinymce在编辑时继续上一个跨度？

Question

我已经向 tinyMCE 添加了一个自动完成器，它创建了一个具有特定类和属性的跨度。 我们使用它来创建指向我们工具中其他元素的链接。 这些不是“a”标签，因为它不是直接的 url，它是在内部处理的。 这很好用。 我遇到的唯一问题是当我们编辑这些值并且跨度是编辑器中的最后一个条目时，当用户开始输入时，文本将继续在相同的跨度中而不是开始一个新的跨度。

我怎样才能防止这种情况发生？ 我尝试在设置内容时在末尾添加一个空格但没有效果（空格似乎被删除了）。 当我插入跨度以帮助用户以“正常”格式编写时，这个小技巧确实有效。

因此，例如 tinyMCE 的内容将设置为"I'm afraid of <span class='animal' data-animalId='animal2'>crocodile</span>"

添加文本时，跨度“动物”获取内容。 我宁愿它在外面（但仍然在同一条线上）

如果跨度永远不会是 append，我会很高兴。

您可以在此 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);
    });
  },
});

Answer 1

这可能不是最好的解决方案，但使用

editor.setContent(initialValue + " ", {format: 'raw'});

成功了。 tinyMCE 清理方法删除了空间，这可以防止运行这些空间。

如果用户删除该空间，他仍然会“卡在”跨度中，所以我仍然想找到一种方法使这个跨度“最终”，但现在它可以解决问题。

Answer 2

最适合我们用例的解决方法是将 contenteditable="false" 设置为跨度（在 tinyMCE 6 中测试）。 要编辑文本，只需重新使用用于创建它的对话框。

"I'm afraid of <span class='animal' data-animalId='animal2' contenteditable='false'>crocodile</span>"