如何在TinyMCE编辑器中向指定ID/Class的div元素添加内容

这个问题的核心在于：TinyMCE的编辑区域是一个独立的iframe，所以你不能直接用全局的jQuery选择器去定位里面的元素——得先进入编辑器的DOM上下文才行。下面给你一套可靠的实现方案：

核心步骤与代码示例 #

1. 获取目标编辑器实例
   优先通过textarea的ID获取编辑器（比activeEditor更稳定，避免多编辑器场景出错）：

   const editor = tinymce.get('notice'); // 你的textarea ID是"notice"
   

2. 定位到编辑器内的目标Div
   用editor.getBody()获取编辑器的body元素，把它作为jQuery的上下文，就能精准找到#myDiv了：

   // 替换#myDiv的内容
   $(editor.getBody()).find('#myDiv').html('这是新的更新内容');
   
   // 向#myDiv末尾追加内容
   $(editor.getBody()).find('#myDiv').append('<p>追加的段落</p>');
   
   // 向#myDiv开头添加内容
   $(editor.getBody()).find('#myDiv').prepend('<span>前置的文本</span>');
   

处理编辑器未初始化的情况 #

如果你的代码是在页面加载时直接执行，可能会遇到编辑器还没初始化完成的问题，这时候可以把逻辑放在TinyMCE的初始化回调里：

tinymce.init({
  selector: '#notice',
  // 其他配置项...
  init_instance_callback: function(editor) {
    // 编辑器初始化完成后执行更新逻辑
    $(editor.getBody()).find('#myDiv').html('编辑器就绪后更新的内容');
  }
});

针对Class选择器的扩展 #

如果要操作指定Class的div，只需要把find('#myDiv')改成find('.your-class-name')就行，比如：

$(editor.getBody()).find('.target-class').append('给所有目标class的div追加内容');

这样不管光标在不在目标div里，都能直接对它进行内容更新啦～

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