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. C#LeetCode刷题之#55-跳跃游戏（Jump Game）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3674 访问. 给定一个非负整数数组,你最初位于数组的第一个位置. ...

  2. C#设计模式之12-代理模式

    代理模式(Proxy Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/411 访问. 代理模式属于结构型 ...

  3. java如何实现发送邮箱

    package cn.buy.util; import java.security.GeneralSecurityException; import java.util.Properties; imp ...

  4. Redis持久化存储——>RDB & AOF

    Redis中两种持久化存储机制RDB和AOF redis是一个内存数据库,数据保存在内存中,但是我们都知道内存的数据变化是很快的,也容易发生丢失.幸好Redis还为我们提供了持久化的机制,分别是RDB ...

  5. windows下mongoDB的下载和安装

    1.进入mongoDB官网,官网地址:https://www.mongodb.com 2.  点击Try free按钮,进入下载页面 3.点击download进行下载:下载完成如下图: 4.点击下载的 ...

  6. ubuntu 绝望事件

    @ubuntu.com hi!大家好,早上发生了很有意思的事情 显示器分辨率(x2) 系统 2560x1440 Ubuntu 20.04.1 LTS 上面的表格是现在的环境 开机进入锁屏页面,正常显示 ...

  7. 学长小清新题表之UOJ 31.猪猪侠再战括号序列

    学长小清新题表之UOJ 31.猪猪侠再战括号序列 题目描述 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫\(\_CallMeGGBond\). 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领 ...

  8. C#分布式登录——jwt

    一.传统的session登录 在服务器存储一份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为cookie,以便下次请求时发送给我们的应用,这样我们的应用就能识别请求来自哪个用户了,这 ...

  9. SpringSecurity权限管理系统实战—四、整合SpringSecurity（上）

    目录 SpringSecurity权限管理系统实战-一.项目简介和开发环境准备 SpringSecurity权限管理系统实战-二.日志.接口文档等实现 SpringSecurity权限管理系统实战-三 ...

  10. idea git拉取、合并、处理冲突、提交代码具体操作

    早在两个月前我还在用eclipse开发,并且也发布的一些eclipse git的相关操作(操作都是本人亲自实践过的),但由于项目团队要求,开发工具统一用idea,实在不得已而为之切换了开发工具, 初次 ...