TinyMCE v3中如何替换指定div.foo元素内容（无视选中内容）

针对你的需求——不管用户选中的是div.foo本身还是它内部的div.bar，都用新内容替换整个div.foo区域——可以按照以下思路和代码实现：

核心逻辑 #

1. 从当前用户的选区出发，向上遍历DOM树，定位到包含选区的最外层div.foo元素
2. 通过TinyMCE的DOM操作API，直接替换这个目标元素的内容（或整个元素）

具体代码实现 #

// 绑定到你的自定义插件按钮点击事件的处理函数
function replaceTargetFooDiv(html_content) {
    const editor = tinyMCE.activeEditor;
    const selection = editor.selection.getSel(); // 获取浏览器原生选区对象
    let currentNode = selection.anchorNode; // 拿到选区的锚点节点

    // 向上遍历DOM，找到最近的div.foo父元素
    const targetFooDiv = editor.dom.getParent(currentNode, 'div.foo');
    
    if (targetFooDiv) {
        // 方案1：替换div.foo内部的HTML内容（保留div.foo本身的结构）
        editor.dom.setHTML(targetFooDiv, html_content);

        // 方案2：如果需要完全替换掉整个div.foo元素（比如要修改class等属性）
        // const newFooDiv = editor.dom.create('div', {class: 'foo'}, html_content);
        // editor.dom.replace(newFooDiv, targetFooDiv);

        // 可选：替换完成后将光标定位到新内容上，提升用户体验
        editor.selection.select(targetFooDiv);
    } else {
        // 处理用户选中区域不在div.foo内的情况
        alert('请在目标foo区域内操作');
    }
}

关键API说明 #

• editor.selection.getSel()：获取浏览器原生的Selection对象，用来定位用户当前选中的节点位置
• editor.dom.getParent(node, selector)：TinyMCE封装的便捷DOM方法，自动向上查找匹配CSS选择器的父元素，比原生DOM遍历更高效
• editor.dom.setHTML(element, html)：直接设置指定元素的内部HTML内容
• editor.dom.replace(newEl, oldEl)：用新创建的元素替换旧元素，适合需要彻底替换div.foo本身的场景

这样修改后，无论用户点击按钮前选中的是div.foo还是它内部的div.bar，都会精准定位到目标div.foo并完成替换，完全符合你想要的效果。

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