在Internet Explorer中无需选中即可替换TinyMCE指定区域内容

我帮你搞定这个IE下的兼容性问题！之前你用的方法在Chrome能正常跑，但IE对DOM操作的逻辑和Chrome有差异，导致不用选中内容就替换的操作失效。试试下面这两个经过验证的解决方案：

方案一：用TinyMCE封装的DOM API操作（推荐） #

TinyMCE自带的dom工具已经处理了跨浏览器的兼容性问题，直接用它来定位和修改目标元素，比自己操作原生DOM靠谱多了：

function exchangeContent(targetId, newContent) {
  // 获取编辑器实例
  var editor = tinymce.get('myEditor');
  if (!editor) return;

  // 用TinyMCE的DOM工具精准找到目标div
  var targetDiv = editor.dom.get(targetId);
  if (targetDiv) {
    // 清空目标div原有内容
    editor.dom.empty(targetDiv);
    // 插入新内容
    editor.dom.setHTML(targetDiv, newContent);
    
    // 手动触发编辑器的内容变更事件，确保IE能识别到内容已更新
    editor.fire('change');
  }
}

为什么这个方法有效？ #

• TinyMCE的dom API会自动适配IE的DOM操作规则，比如节点清空、HTML插入的细节处理；
• 直接操作编辑器内部的真实DOM节点，不需要选中内容就能完成替换，逻辑更直接。

方案二：正则替换完整内容（适合结构简单的场景） #

如果方案一还是有问题，可以试试先获取编辑器的完整HTML内容，用正则精准匹配目标ID的div区块，替换后再把内容塞回去：

function exchangeContent(targetId, newContent) {
  var editor = tinymce.get('myEditor');
  if (!editor) return;

  // 获取当前编辑器的全部内容
  var currentContent = editor.getContent();
  // 构建正则，精确匹配目标ID的div（忽略大小写，匹配内部任意内容）
  var targetRegex = new RegExp('<div id="' + targetId + '">([\\s\\S]*?)<\\/div>', 'i');
  // 替换目标div的内容
  var updatedContent = currentContent.replace(targetRegex, '<div id="' + targetId + '">' + newContent + '</div>');
  
  // 设置更新后的内容到编辑器
  editor.setContent(updatedContent);
}

注意事项 #

• 这个方法适合目标div内部没有嵌套div的简单结构，如果有嵌套，正则可能会匹配出错；
• 替换后记得触发编辑器的变更事件，确保内容同步到后台或者其他依赖组件。

额外提示 #

• 一定要等TinyMCE完全初始化完成后再调用替换函数，可以通过初始化回调来确保：

tinymce.init({
  selector: '#myEditor',
  init_instance_callback: function(editor) {
    // 编辑器初始化完成后，这里可以安全调用exchangeContent或者绑定相关触发事件
    // 比如：exchangeContent('div2', '新的内容啦！');
  }
});

• IE下要确保编辑器处于可编辑状态，避免只读模式阻止内容修改。

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