无法选中TinyMCE内HTML元素 如何获取iframe内部元素绑定字数统计监听

问题原因 #

• 动态渲染时机不匹配：TinyMCE的相关DOM（包括#mceu_7容器、内部iframe等）均为初始化过程中动态生成，若代码在编辑器初始化完成前执行，无法选中尚未渲染的元素，就会返回null。
• iframe上下文隔离：编辑器的内容区域渲染在独立的<iframe>标签内，顶层document的查询方法默认无法跨iframe获取内部DOM元素。

解决方案 #

优先使用TinyMCE官方提供的API实现需求，无需手动查询DOM，兼容性和稳定性更高：

1. 字数统计功能实现示例：
   在你的TinyMCE初始化配置中新增init_instance_callback回调，保证逻辑在编辑器渲染完成后执行：

tinymce.init({
  // 保留你原有所有配置项
  selector: '#wp-post_content', // 对应你原始绑定编辑器的textarea ID
  init_instance_callback: function (editor) {
    const wordCount = document.getElementById("word-counter");
    if (!wordCount) return;

    // 监听编辑器输入事件
    editor.on('input', () => {
      // 获取编辑器纯文本内容
      const txt = editor.getContent({ format: 'text' }).trim();
      // 计算有效字数
      const count = txt ? txt.split(/\s+/).filter(item => item).length : 0;
      wordCount.textContent = count;
    });
  }
});

2. 若确实需要手动获取iframe内元素，可使用如下方法（需确保在编辑器初始化完成后执行）：

// TinyMCE生成的iframe默认ID规则为「原始textarea ID + _ifr」
const editorIframe = document.querySelector('#wp-post_content_ifr');
const iframeDoc = editorIframe.contentDocument || editorIframe.contentWindow.document;
// 此时可在iframe的文档上下文中查询内部元素
const targetPElement = iframeDoc.querySelector('body#tinymce > p');

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