Chrome扩展内容脚本如何获取TinyMCE编辑器光标位置？

针对你遇到的无法调用TinyMCE API获取光标位置、插入文本的问题，我整理了几个针对性的解决方案和排查思路，分场景说明：

一、先明确TinyMCE的运行上下文 #

首先要确认你的TinyMCE是在主页面DOM里，还是在独立的iframe中：

• 打开Chrome开发者工具的「Elements」面板，查找是否有包含TinyMCE的iframe元素；
• 切换到「Frames」下拉菜单，查看对应iframe的控制台，尝试直接输入tinyMCE.activeEditor，确认API是否可访问。

二、针对主页面上下文的TinyMCE #

你之前的代码有两个关键问题：拼写错误（是tinyMCE大写M，不是tinyMce）、注入位置错误。以下是修正后的注入方案：

// 内容脚本中执行
function injectToMainPage() {
  const actualCode = `
    // 等待TinyMCE完全初始化
    function waitForEditorReady() {
      if (typeof tinyMCE !== 'undefined' && tinyMCE.activeEditor) {
        const editor = tinyMCE.activeEditor;
        // 获取光标位置
        const startPos = editor.selection.getStart();
        console.log("光标起始位置:", startPos);
        // 在光标处插入文本
        editor.insertContent('【插入的新文本】');
      } else {
        // 100ms后重试，最多尝试10次
        setTimeout(waitForEditorReady, 100);
      }
    }
    waitForEditorReady();
  `;
  const script = document.createElement('script');
  script.textContent = actualCode;
  (document.head || document.documentElement).appendChild(script);
  script.remove();
}

injectToMainPage();

三、针对iframe中的TinyMCE #

因为你已经注入到所有框架，需要把代码注入到TinyMCE所在的iframe上下文，这里提供两种方案：

方案1：使用Chrome扩展的scripting权限（推荐） #

首先在manifest.json中添加权限：

{
  "permissions": ["scripting", "activeTab"],
  "host_permissions": ["<all_urls>"] // 根据目标网站调整
}

然后在内容脚本中执行：

// 内容脚本中执行
async function injectToTinyMCEIframe() {
  const iframes = Array.from(document.querySelectorAll('iframe'));
  for (const iframe of iframes) {
    try {
      // 检查当前iframe是否包含TinyMCE
      const checkResult = await chrome.scripting.executeScript({
        target: { frameId: iframe.frameId },
        func: () => typeof tinyMCE !== 'undefined' && tinyMCE.activeEditor
      });
      
      if (checkResult[0].result) {
        // 注入操作脚本
        await chrome.scripting.executeScript({
          target: { frameId: iframe.frameId },
          func: () => {
            const editor = tinyMCE.activeEditor;
            // 插入文本到光标位置
            editor.insertContent('【从iframe插入的文本】');
            // 输出选区信息
            console.log("选区起始位置:", editor.selection.getStart());
            console.log("选中内容:", editor.selection.getContent());
          }
        });
        break; // 找到目标iframe后停止遍历
      }
    } catch (e) {
      // 跨域iframe无法访问，直接跳过
      continue;
    }
  }
}

injectToTinyMCEIframe();

方案2：直接向iframe的DOM注入脚本 #

如果无法使用scripting权限，可以尝试直接操作iframe的文档：

// 内容脚本中执行
function injectScriptToIframe(iframe) {
  try {
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    const actualCode = `
      const editor = tinyMCE.activeEditor;
      if (editor) {
        editor.insertContent('【直接注入iframe的文本】');
        console.log("光标位置:", editor.selection.getStart());
        // 触发编辑器内容变更事件，确保修改被保存
        editor.fire('change');
      }
    `;
    const script = doc.createElement('script');
    script.textContent = actualCode;
    (doc.head || doc.documentElement).appendChild(script);
    script.remove();
  } catch (e) {
    console.log("无法访问该iframe（跨域限制）:", e);
  }
}

// 遍历所有iframe尝试注入
document.querySelectorAll('iframe').forEach(injectScriptToIframe);

四、无需TinyMCE API的替代方案 #

如果API调用始终有问题，可以直接操作编辑器的内容DOM（适合iframe场景）：

// 在iframe上下文执行的代码
const editorBody = iframe.contentDocument.body;
editorBody.focus();
const selection = iframe.contentWindow.getSelection();

if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  const textNode = document.createTextNode('【原生DOM插入的文本】');
  // 替换选中内容（如果有的话），插入新文本
  range.deleteContents();
  range.insertNode(textNode);
  // 移动光标到插入文本的末尾
  range.setStartAfter(textNode);
  range.setEndAfter(textNode);
  selection.removeAllRanges();
  selection.addRange(range);
}

五、常见问题排查 #

1. tinyMCE is not defined错误：
   • 要么是脚本注入时机太早（TinyMCE还未加载），可以通过setTimeout延迟执行；
   • 要么是注入到了错误的上下文（比如主页面，而TinyMCE在iframe里）。
2. 跨域iframe无法访问：
   • 确保扩展的host_permissions包含目标iframe的域名；
   • 使用scripting权限可以绕过跨域限制。
3. 选区信息不准确：
   • 先调用editor.focus()确保编辑器处于激活状态，再获取选区。

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