TinyMCE：在复杂模板HTML中编辑文本的问题

我正在使用模板插件插入html代码段。例如：

<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>

一切正常，直到编辑器尝试更改按钮的文本并退出其html以添加更多文本。插入符号不会离开A标记，而是在跨距内或在关闭标记之前停止。最后我们得到了这样的结果：

...Button Text</span> some more </span> text here </a>

…按钮文本此处有更多文本

它完全破坏了布局

---

有没有一种方法可以使用某些属性将链接标记为单个实体块或跨距标记为不可输入，以防止在意外位置插入文本？

您可以使用

contenteditable=“false”

属性使HTML的一部分不可编辑。以下是一个例子：

我将您的HTML链接更改为：

<a contenteditable="false" class="button" href="#">
  <span class="button-inner">
    <span class="button-label">
      Button Text
    </span>
  </span>
</a>

它将像编辑器中的单个字符一样工作