1. 错误示例：表单容器是div标签则无法获取ueditor的内容

注：对于普通的表单元素表单容器是div也都能获取

<!DOCTYPE html>

<html>

<head>

	<title>layui ueditor</title>

	<meta charset="utf-8">

	<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">

	<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>

	<style>

		.box {

			width: 60%;

			margin: 60px auto;

		}

	</style>

</head>

<body>

<div class="box">

	<div class="layui-form" action="">

		<div class="layui-form-item">

			<label class="layui-form-label">标题</label>

			<div class="layui-input-block">

				<input type="text" name="title" class="layui-input">

			</div>

		</div>

		<div class="layui-form-item layui-form-text">

			<label class="layui-form-label">内容</label>

			<div class="layui-input-block">

				<textarea id="container" name="content"></textarea>

			</div>

		</div>

		<div class="layui-form-item">

			<div class="layui-input-block">

				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

				<button type="reset" class="layui-btn layui-btn-primary">重置</button>

			</div>

		</div>

	</div>

</div>

<!-- 配置文件 -->

<script type="text/javascript" src="ueditor-1.4.3.2/ueditor.config.js"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="ueditor-1.4.3.2/ueditor.all.js"></script>

<script>

	layui.use('form', function(){

		var form = layui.form;

		// 实例化编辑器

		var ue = UE.getEditor('container');

		//监听提交

		form.on('submit(formDemo)', function(data){

			console.log(data.field)

			return false;

		});

	});

</script>

</body>

</html>

获取不到 ueditor 的内容

2. 上面表单容器div标签改为 form标签

<form class="layui-form" action="">

	<div class="layui-form-item">

		<label class="layui-form-label">标题</label>

		<div class="layui-input-block">

			<input type="text" name="title" class="layui-input">

		</div>

	</div>

	<div class="layui-form-item layui-form-text">

		<label class="layui-form-label">内容</label>

		<div class="layui-input-block">

			<textarea id="container" name="content"></textarea>

		</div>

	</div>

	<div class="layui-form-item">

		<div class="layui-input-block">

			<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

			<button type="reset" class="layui-btn layui-btn-primary">重置</button>

		</div>

	</div>

</form>

正常获取 ueditor 的内容

layui表单引入ueditor遇坑记的更多相关文章

  1. layui表单验证

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...

  2. Cat搭建遇坑记

    1. Cat搭建遇坑记 1.1. 报错 服务端启动 Unable to get component: class com.dianping.cat.analysis.TcpSocketReceiver ...

  3. layui 表单遇到的小问题

    select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...

  4. layui表单提交

    关于layui表单提交  只是简单用一个文本框记录一下提交过程    其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...

  5. LayUI表单提交不走ajax原因

    在使用layui的时候.遇到一个问题.提交表单,没有走ajax,直接提交了表单页面. 原因是因为JQuery未引入 解决办法.引入JQuery或者使用layui自带Jquery var $ = lay ...

  6. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  7. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  8. 组件 layui 表单抓取数据四步走

    注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...

  9. .net core使用Ku.Core.Extensions.Layui实现layui表单渲染

    演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...

随机推荐

  1. JS 与 jQery 的区别主要在于 DOM

    //目前正在学习前端阶段,把知识点整理.保存下来以便日后查看 首先引入jQery: 需要先引入css,再引入js: jQery需要在js前引入,再引入框架,最后才是js的引入:css也相同,先引入框架 ...

  2. MySQL数据的增删改查查查查查查查查查查查查查查查查（查是真的多）

    一 数据的增加 主要是运用insert  into 语句. 格式: insert  into 表名称 values(数据,数据,数据)(要按顺序来,有没有数据的可以加null) 只增加某些字段里数据的 ...

  3. VUE——添加组件模块（图表）

    Vue是由一个个小模块组成的,模块可以让页面简介还可以复用: 1.不固定数据数量传到子组件 父组件: <chartVue v-for="(item, index) in chartLi ...

  4. 8.oracle 表查询

    演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表 字段名称 数据类型 是否为空 备注 -------- ----------- -------- ...

  5. 微信公众号请求code时报redirect_uri 参数错误

    (1) 检查微信公众号中"接口权限"--"网页授权获取用户基本信息"中的网页授权域名.域名不带http(s) (2)如果在拼接跳转到微信授权接口的URL时,使用 ...

  6. OpenStack虚拟机virtaulinterfance 网络设备在libvirt的代码梳理

    nova创建虚机网卡实际设备的代码调用流程为 _create_domain_and_network---->plug_vifs-->LibvirtGenericVIFDriver.plug ...

  7. CCF-202006-1线性分类器

    1 def judga(lis1,z): #判断列表lis1中点是否都在线z的一侧 s=0 for i in lis1: if z[0]+i[0]*z[1]+i[1]*z[2]>0: s+=1 ...

  8. 计算机网络-网络层（6）ICMP协议

    互联网控制报文协议(ICMP,Internet Control Message Protocol),被主机和路由器用来彼此沟通网络层的信息 ICMP报文是承载在IP分组中的,即lCMP报文是作为IP有 ...

  9. 黑马新版PYTHON教学课程(全)资料加视频完整版百度网盘资料

    黑马新版PYTHON教学课程(全)资料加视频完整版 无加密,适合0基础人群.基础班+就业班.不用解压在线看 百度网盘地址一 淘宝店地址二

  10. SpringBoot2搭建基础架构——开源软件诞生4

    技术框架篇--第4篇 用日志记录“开源软件”的诞生 赤龙ERP开源地址: 点亮星标,感谢支持,加微信与开发者交流 kzca2000 码云:https://gitee.com/redragon/redr ...