layui文本域如何接收后台返回的数据

Layui文本域仅接收纯文本，需用.value或.val()赋值；layedit富文本编辑器则要求setContent传入合法HTML字符串，不可直接传JSON对象，否则显示[object Object]或报错。

Layui 文本域（textarea）本身不解析或渲染后台数据，它只是个普通表单控件；真正能“接收并展示”后台 JSON 数据的，是 layedit 富文本编辑器——而它要求数据必须是 HTML 字符串格式，不是原始 JSON。

layedit.setContent() 为什么传 JSON 字符串会乱码或空白

常见错误是直接把后端返回的纯 JSON 对象（比如 {"title":"测试","content":"

正文

"}）塞进 layedit.setContent(index, jsonObj)。Layui 会尝试把整个对象转成字符串再插入 DOM，结果变成 [object Object] 或直接报错。

1. layedit.setContent() 只接受字符串参数，且该字符串必须是合法 HTML（含标签），不能是 JSON 对象或未转义的纯文本
2. 如果后端返回的是 { "content": "<p>Hello</p>" } 这种 HTML 实体编码内容，要先用 DOMPurify.sanitize() 或 decodeURIComponent(escape()) 解码，否则显示为源码
3. 若后端返回的是纯 Markdown 或 JSON 结构（如 {"blocks":[{"text":"xxx"}]}），必须在前端转换为 HTML 才能被 layedit 渲染

从接口取值后正确回显到 layedit 的三步操作

假设后端返回结构为：{"code":0,"msg":"","data":{"id":123,"content":"<p>欢迎使用</p><img src='/upload/1.jpg'>"}}

1. 用 $.get('/api/detail', {id: 123}, function(res){...}) 获取响应，确认 res.code === 0
2. 提取 res.data.content，注意它可能是 HTML 字符串、实体编码字符串，或需进一步处理的字段
3. 调用 layedit.setContent(editIndex, res.data.content || '') —— 不要传 res.data 整体对象

textarea 普通文本域怎么填后台返回的纯文本

如果只是用原生 textarea（没初始化 layedit），那就简单得多：直接赋值 .value 或 jQuery 的 .val()。

1. 后端返回 {"msg":"ok","data":{"remark":"用户填写的备注"}} → 取 res.data.remark
2. document.getElementById('remark').value = res.data.remark || ''
3. jQuery 写法：$('#remark').val(res.data.remark || '')
4. 注意 XSS 风险：纯文本域不解析 HTML，但若后端返回了恶意脚本字符串（如 <script>alert(1)</script>），虽不会执行，仍建议服务端过滤或前端用 textContent 替代 innerHTML 渲染场景

容易忽略的编码和换行问题

后端返回的文本含中文、换行符（n）时，textarea 能正常显示，但 layedit 会把 n 当作普通字符而非换行，导致排版错乱。

1. 解决方案：后端返回时把 n 转成 <br>，或前端手动替换：

   res.data.content.replace(/n/g, '
   ')

2. 富文本内容里有相对路径图片（如 src="upload/1.jpg"），需确保前端域名与图片可访问路径一致，否则回显时图片 404
3. 如果 layedit 初始化时设置了 height，但内容过长导致滚动条遮挡按钮，可在 done 回调里调用 layedit.sync(editIndex) 强制同步高度