TinyMCE 6中execCommand 'mceInsertContent'丢失<a href>问题排查

问题原因 #

你遇到的a标签被移除的情况，核心原因是HTML规范的约束，和valid_elements配置关系不大：

1. 传统HTML规范中，<a>属于行内元素，不能包裹<div>这类块级元素；
2. TinyMCE的内容清理机制会自动修正不符合标准的HTML结构，所以直接剥离了外层的<a>标签，只保留内部合法的<div>内容；
3. 你的valid_elements: '+*[*]'虽然放开了所有元素和属性的限制，但编辑器的结构合法性检查优先级更高，依然会修正违规嵌套。

解决办法 #

方案1：调整HTML结构符合规范 #

把被包裹的块级元素换成行内元素，或者改变嵌套关系：

<!-- 替换div为span -->
<div id="container"><a href="/"><span id="inner">hi</span></a></div>

<!-- 或者让a作为div的子元素 -->
<div id="container">
  <div id="inner"><a href="/">hi</a></div>
</div>

方案2：启用HTML5模式支持块级元素嵌套 #

HTML5允许<a>标签包裹块级元素，你可以修改TinyMCE的schema配置为html5，让编辑器遵循HTML5规范：

tinymce.init({
  // 其他配置...
  schema: 'html5',
  valid_elements: '+*[*]',
  extended_valid_elements: 'a[href|target=_blank|class]'
});

修改后再插入原HTML结构，编辑器就不会移除<a>标签了。

内容的提问来源于stack exchange，提问作者Daan