TinyMCE如何禁用锚点元素默认包裹行为 调整标签嵌套层级

要实现锚点<a>标签包裹所有内联格式标签（字体span、加粗strong等）、支持全局覆盖锚点样式的效果，不需要魔改TinyMCE源码，通过以下3项配置即可实现：

• 第一步：调整元素合法嵌套规则
  初始化时通过valid_children配置修改默认的元素嵌套校验逻辑，禁止span、strong等格式标签包裹a标签，同时允许a标签包裹所有常见内联格式节点与文本：

  tinymce.init({
    selector: '#your-editor',
    // 嵌套规则配置
    valid_children: '+a[span|strong|em|u|s|b|i|#text],-span[a],-strong[a],-em[a],-b[a],-i[a],-u[a],-s[a]',
    // 其他基础配置...
  })
  

• 第二步：重写链接插入与内容导入时的节点层级逻辑
  通过setup钩子监听链接插入、内容粘贴事件，自动把a标签外层的格式节点移动到a标签内部，保证输出结构符合预期：

  tinymce.init({
    // 前述配置省略
    setup: (editor) => {
      // 统一调整a标签层级的工具方法
      const adjustAnchorWrap = (anchor) => {
        const formatTags = ['SPAN', 'STRONG', 'B', 'EM', 'I', 'U', 'S'];
        let parent = anchor.parentNode;
        while (parent && formatTags.includes(parent.tagName) && !parent.closest('a')) {
          // 将格式节点移到a标签原位置
          parent.parentNode.insertBefore(parent, anchor);
          // 将a标签移入格式节点内部，完成层级反转
          parent.appendChild(anchor);
          parent = anchor.parentNode;
        }
      };
  
      // 监听手动插入链接事件
      editor.on('ExecCommand', (e) => {
        if (e.command !== 'mceInsertLink') return;
        const currentNode = editor.selection.getNode();
        if (currentNode.tagName === 'A') adjustAnchorWrap(currentNode);
      });
  
      // 监听粘贴事件，处理粘贴进来的内容结构
      editor.on('PastePostProcess', (e) => {
        e.node.querySelectorAll('a').forEach(anchor => adjustAnchorWrap(anchor));
      });
    }
  })
  

• 第三步：配置全局锚点样式
  调整完层级后a标签处于内联节点最外层，直接在content_style中配置a标签样式即可实现全局覆盖，不会被内部格式标签截断样式继承：

  tinymce.init({
    // 前述配置省略
    content_style: `
      a {
        color: #1677ff;
        text-decoration: none;
      }
      a:hover {
        color: #4096ff;
        text-decoration: underline;
      }
    `
  })
  

配置完成后，编辑器生成的锚点结构会完全匹配预期：a标签在最外层包裹所有格式标签与文本，和给出的示例结构一致。

注意：如果启用了advlist、fontfamily、fontsize等其他格式类插件，只需要把对应插件生成的内联标签名加到formatTags数组和valid_children规则里即可，核心逻辑不需要改动。

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