激活WYSIHTML5后textarea无法填充API内容，求解决办法

嘿，我懂你遇到的这个糟心问题！当你初始化WYSIHTML5这类富文本编辑器后，原来的<textarea>元素其实已经被编辑器生成的新DOM结构替换或隐藏了——这时候你再直接用$('#textNewsBody').html()去设置内容，自然不会生效，因为你操作的已经不是编辑器实际在用的内容容器了。

下面是亲测有效的解决步骤：

1. 保存富文本编辑器的实例 #

初始化编辑器时，把它的实例保存下来，这样后面就能调用它的内置方法来设置内容：

// 初始化WYSIHTML5并保存编辑器实例
var newsEditor = $('#textNewsBody').wysihtml5({
  "font-styles": true,
  "emphasis": true,
  "lists": true,
  "html": false,
  "link": false,
  "image": false,
  "color": false
}).data("wysihtml5").editor;

2. 用编辑器的API设置内容 #

在你的API回调里，不要再直接操作textarea的html()或者val()，而是调用编辑器实例的setValue()方法：

$('.btnEditNews').live('click', function () { 
  var data = new FormData(); 
  var xhr = new XMLHttpRequest(); 
  var jsonResponse; 

  xhr.addEventListener("readystatechange", function () { 
    if (this.readyState === 4) { 
      jsonResponse = JSON.parse(this.response)['singleNews']; 
      $('#titleNews').val(jsonResponse.title); 
      // 用编辑器实例的setValue方法填充内容
      newsEditor.setValue(jsonResponse.newsText); 
      $('#imgNews').attr('src', jsonResponse.file); 
    } 
  }); 

  xhr.open("GET", url); 
  xhr.send(data); 
});

额外提示：其他富文本编辑器的通用思路 #

如果你换用其他编辑器（比如CKEditor、TinyMCE），核心逻辑也是一致的：

• CKEditor：使用editor.setData(内容)
• TinyMCE：使用tinymce.get('textareaId').setContent(内容)
  总结就是不要直接操作原始textarea，而是调用编辑器自身提供的内容设置方法。

另外还要注意初始化时机：如果你的编辑模态框是动态渲染的（比如点击按钮才生成），要确保在模态框完全显示、textarea已经存在于DOM中之后，再初始化富文本编辑器，不然也可能出现无法绑定的问题。

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