Bootstrap wysihtml5设置值无效求助：Ajax后填充编辑器失败

我来帮你搞定这个wysihtml5编辑器的内容填充问题～ 核心原因是wysihtml5有自己的内容操作API，直接用jQuery的val()或html()是无法同步到编辑器可视化区域的，得用它官方提供的方法来设置内容。

第一步：保存编辑器实例 #

初始化编辑器的时候，别直接链式调用完事，把编辑器实例存下来，方便后续调用API：

// 放在$(document).ready()里确保DOM加载完成
$(document).ready(function() {
    // 初始化编辑器并保存实例到变量
    var wysiEditor = $("#<%=txtDescrizioneBreveCategoria.ClientID%>")
        .wysihtml5()
        .data("wysihtml5").editor;
});

第二步：在Ajax回调中用API设置内容 #

在你的ModificaCategoria函数的Ajax成功回调里，调用编辑器实例的setValue()方法来填充内容，这个方法会同时更新编辑器的可视化区域和底层的textarea：

function ModificaCategoria(id) {
    $.ajax({
        url: "Categorie.aspx/GetCategoria",
        type: 'POST',
        dataType: "json",
        data: JSON.stringify({ 'id': id }),
        contentType: 'application/json; charset=utf-8',
        cache: false,
        async: true, // 建议改成异步，同步请求会阻塞浏览器
        processData: true,
        traditional: true,
        success: function (data) {
            var c = $.parseJSON(data.d);
            // 用编辑器API设置内容，替换成你实际需要填充的字段名
            wysiEditor.setValue(c.descrizioneBreveCategoria);
        },
        error: function(xhr, status, err) {
            // 加个错误处理方便调试
            console.log("加载分类数据出错：", err);
        }
    });
}

关键说明 #

为什么直接操作textarea无效？因为wysihtml5会把原始的textarea隐藏，生成一套自己的可视化编辑DOM结构，普通的jQuery方法只能修改隐藏的textarea值，无法同步到用户看到的编辑区域。而setValue()方法是编辑器官方提供的，会同时更新底层textarea和可视化区域，所以才能生效。

另外注意：确保编辑器初始化完成后再调用setValue()，最好把初始化代码放在$(document).ready()里，避免DOM未加载完成导致的实例获取失败。

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