layui富文本编辑器内容不会自动同步到textarea,必须调用layedit.sync(index)在表单验证中手动同步,否则提交时textarea值为空;回显时需先设textarea.value再初始化编辑器。

layui 的 textarea 本身只是个普通表单控件,富文本编辑器(如 layedit)并不会直接“改造”它,而是以它为锚点,在其下方动态生成一套 UI,内容实际存在内存中 —— 所以不手动同步,textarea 值永远为空。
layedit.build 后 textarea 仍是空的?
这是最常见误解:以为渲染完编辑器,textarea 就自动更新了。实际上 layedit.build('id') 只是挂载 UI,原始 textarea 仍被隐藏且未写入任何 HTML。
-
layedit.getContent(index)返回的是带标签的 HTML 字符串,但不会自动填回textarea -
textarea的value属性始终为空,除非你显式调用layedit.sync(index) - 表单提交时若没同步,后端收到的
name="xxx"字段值就是空字符串
表单提交前必须调用 layedit.sync
不能依赖「点击按钮瞬间再 sync」,因为 layui 表单验证、form.on('submit') 触发时,textarea 还没更新。正确做法是把 sync 放进验证逻辑里。
- 给
textarea加lay-verify="content"属性 - 在
form.verify({ content: function() { layedit.sync(index); } })中执行同步 - 这样只要 form 提交触发验证,就先确保
textarea.value已更新 - 避免手写
onclick或submit事件里重复调用,容易漏或重复
textarea 必须有 name 属性且不可 display: none
很多人为了“隐藏”而加 style="display:none",这会导致部分浏览器下 form.serialize() 或 data.field 直接忽略该字段。
- 正确做法是保留
textarea在 DOM 流中,仅用visibility: hidden或opacity: 0配合position: absolute覆盖 —— 但更稳妥的是不隐藏,只设height: 0; padding: 0; border: none; -
name属性必不可少,否则即使同步了,表单序列化也取不到键名 - ID 和 name 最好一致(如
id="content" name="content"),避免调试时混淆
回显时要反向同步:textarea → layedit
编辑已有内容时,服务端返回的 HTML 字符串要先塞进 textarea.value,再初始化 layedit,否则编辑器空白。
- 先设置:
document.getElementById('content').value = serverHtml; - 再调用:
var index = layedit.build('content'); - 不要试图用
layedit.setContent(index, html)替代 —— 它只影响编辑区 DOM,不写入textarea,后续提交仍会丢数据 - 如果页面已加载完才拿到数据,需先
layedit.destroy(index)再重建,否则旧实例残留
真正麻烦的不是初始化,而是双向绑定的时机和 DOM 状态一致性 —— 每次操作都得问自己:此刻 textarea.value 和编辑器视图内容是否严格一致?差一点,后端就收不到东西。











