通过jQuery Ajax动态向TinyMce加载数据库内容遇问题

嘿，我帮你捋捋这个问题的根源，你之前踩的坑其实是没用到TinyMCE的官方正确姿势，直接改DOM肯定会出问题的，咱们一步步来解决：

核心问题 #

TinyMCE有自己的内部数据模型和DOM管理机制，直接修改它生成的.mce-edit-area元素的HTML是完全错误的——这会绕过编辑器的状态同步逻辑，导致内容看起来显示了但无法编辑，这就是你说的“临时拙劣办法”失效的原因。另外，如果你在Ajax回调里重复初始化编辑器，或者初始化时机和数据获取时机不匹配，也会导致内容无法正确填充。

正确解决方案分两种场景 #

场景1：页面加载时已经初始化了TinyMCE #

如果你的页面在加载完成后就已经初始化了目标textarea（比如通过页面初始化阶段的tinymce.init()），那在Ajax成功回调里不需要重新初始化，直接获取编辑器实例并设置内容即可：

function OnSuccess(data) {
  // 通过选择器获取编辑器实例，这里用你的textarea的class ".tiny"
  const editor = tinymce.get('.tiny');
  
  // 确保编辑器实例存在（避免初始化未完成的情况）
  if (editor) {
    // 用官方API设置内容，支持直接传入HTML格式内容
    editor.setContent(data.d);
  }
}

小提示：如果你的textarea有唯一ID，用tinymce.get('your-textarea-id')会比用class更准确，因为tinymce.get()优先匹配元素ID。

场景2：在Ajax成功后才初始化TinyMCE #

如果编辑器是等待Ajax返回数据后才初始化的，那可以在setup回调里监听init事件，在编辑器初始化完成后立即填充内容：

function OnSuccess(data) {
  tinymce.init({
    selector: '.tiny', // 匹配你的目标textarea
    // 这里可以添加你的其他TinyMCE配置（比如工具栏、插件等）
    setup: function(editor) {
      // 编辑器初始化完成后触发此事件
      editor.on('init', function() {
        // 填充从Ajax获取到的内容
        editor.setContent(data.d);
      });
    }
  });
}

额外检查点 #

• 确认data.d确实是正确的HTML内容：可以在回调里用console.log(data.d)打印出来，看看是否是未被转义的正常HTML（如果是转义后的字符串，可能需要先解码，比如用decodeURIComponent(data.d)）。
• 避免重复初始化：如果页面已经初始化过编辑器，再次调用tinymce.init()会导致异常，所以可以先通过tinymce.get('.tiny')判断编辑器是否已存在，再决定是直接设置内容还是初始化。

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