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

Layui 文本域(textarea)本身不解析或渲染后台数据,它只是个普通表单控件;真正能“接收并展示”后台 JSON 数据的,是 layedit 富文本编辑器——而它要求数据必须是 HTML 字符串格式,不是原始 JSON。
layedit.setContent() 为什么传 JSON 字符串会乱码或空白
常见错误是直接把后端返回的纯 JSON 对象(比如 {"title":"测试","content":"<p>正文</p>"})塞进 layedit.setContent(index, jsonObj)。Layui 会尝试把整个对象转成字符串再插入 DOM,结果变成 [object Object] 或直接报错。
-
layedit.setContent()只接受字符串参数,且该字符串必须是合法 HTML(含标签),不能是 JSON 对象或未转义的纯文本 - 如果后端返回的是
{ "content": "<p>Hello</p>" }这种 HTML 实体编码内容,要先用DOMPurify.sanitize()或decodeURIComponent(escape())解码,否则显示为源码 - 若后端返回的是纯 Markdown 或 JSON 结构(如
{"blocks":[{"text":"xxx"}]}),必须在前端转换为 HTML 才能被 layedit 渲染
从接口取值后正确回显到 layedit 的三步操作
假设后端返回结构为:{"code":0,"msg":"","data":{"id":123,"content":"<p>欢迎使用</p><img src='/upload/1.jpg'>"}}
- 用
$.get('/api/detail', {id: 123}, function(res){...})获取响应,确认res.code === 0 - 提取
res.data.content,注意它可能是 HTML 字符串、实体编码字符串,或需进一步处理的字段 - 调用
layedit.setContent(editIndex, res.data.content || '')—— 不要传res.data整体对象
textarea 普通文本域怎么填后台返回的纯文本
如果只是用原生 textarea(没初始化 layedit),那就简单得多:直接赋值 .value 或 jQuery 的 .val()。
- 后端返回
{"msg":"ok","data":{"remark":"用户填写的备注"}}→ 取res.data.remark document.getElementById('remark').value = res.data.remark || ''- jQuery 写法:
$('#remark').val(res.data.remark || '') - 注意 XSS 风险:纯文本域不解析 HTML,但若后端返回了恶意脚本字符串(如
<script>alert(1)</script>),虽不会执行,仍建议服务端过滤或前端用textContent替代innerHTML渲染场景
容易忽略的编码和换行问题
后端返回的文本含中文、换行符(\n)时,textarea 能正常显示,但 layedit 会把 \n 当作普通字符而非换行,导致排版错乱。
- 解决方案:后端返回时把
\n转成<br>,或前端手动替换:res.data.content.replace(/\n/g, '<br>')
- 富文本内容里有相对路径图片(如
src="upload/1.jpg"),需确保前端域名与图片可访问路径一致,否则回显时图片 404 - 如果 layedit 初始化时设置了
height,但内容过长导致滚动条遮挡按钮,可在done回调里调用layedit.sync(editIndex)强制同步高度


















