必须先调用layedit.sync(editIndex)同步内容,再获取textarea值;因为layedit与textarea是独立DOM状态,编辑器修改不自动更新textarea,直接读取会得到旧值或空值。

layui文本域取值前必须同步编辑器内容
富文本编辑器(layedit)和普通 textarea 是两套 DOM 状态:编辑器修改的是渲染层,而表单提交读的是原始 textarea 的 value。不手动同步,form.getValue() 或 data.field 拿到的永远是初始化时的旧值,不是用户编辑后的内容。
正确做法是在提交前调用 layedit.sync(),把编辑器当前内容写回绑定的 textarea 元素:
-
layedit.sync(editIndex)中的editIndex是layedit.build()返回的索引值,不是 id 或 class - 如果多个编辑器,每个都要单独 sync;只 sync 当前要提交的那个
- 同步必须在
form.on('submit(...)')回调里、读取data.field之前执行
示例:
form.on('submit(formSubmit)', function(data) {
layedit.sync(editIndex); // ✅ 关键:先同步
console.log(data.field.text); // ✅ 此时 text 才是最新内容
return false;
});
直接读 textarea.value 为什么有时不准
绕过 layedit.sync() 直接用 document.getElementById('myTextarea').value 读取,在以下情况会失效:
- 编辑器未初始化完成就尝试读取(
layedit.build()异步,DOM 已存在但编辑器还没接管) - 用户只输入了空格或换行,
textarea.value可能为空,但编辑器 UI 显示有内容(因 layedit 默认过滤空白) - 使用了
layedit.setContent()动态设置内容,但没触发内部状态更新,导致value和 UI 不一致
所以不要依赖原生 value,一律走 layedit.sync() + form.getValue() 或 data.field 流程。
form.val() 无法直接读取 layedit 绑定的 textarea
form.val('filterName') 只能读取普通表单控件(input、select、checkbox),对 layedit 绑定的 textarea 无效——它不参与 layui 表单的数据映射,即使该 textarea 在 layui-form 容器内。
原因在于:layedit 是独立模块,它劫持了 textarea 的交互,但没注册到 form 实例中。所以:
-
form.val('myForm')返回的对象里不会包含textarea的 name 字段 - 只有在
form.on('submit(...)')回调中,且已执行layedit.sync()后,data.field才能拿到该字段 - 如果不用 submit 事件(比如点击按钮手动收集),就必须先
layedit.sync(),再读textarea.value
动态创建的 layedit 怎么确保取值有效
通过 JS 动态插入 textarea 并调用 layedit.build() 后,常见取不到值的问题根源是:layui 表单模块不知道这个新元素的存在,data.field 不包含它。
解决方法不是给 form.render(),而是确保:
-
textarea必须有name属性(这是data.field映射的唯一依据) -
layedit.build()必须传入该textarea的 DOM 节点,不能只传 id 字符串(否则 sync 可能失败) - 提交前调用
layedit.sync()时,传入的是 build 返回的正确 index
漏掉任意一点,都会导致取值为空或报错 Cannot read property 'sync' of undefined。


















