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刷题之#40-组合总和 II（Combination Sum II）

    目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3666 访问. 给定一个数组 candidates ...

  2. C#算法设计查找篇之05-二叉树查找

    二叉树查找(Binary Tree Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/706 访问. 二叉排 ...

  3. 01 树莓派4B—C语言编程——GPIO

    #include <stdio.h>#include <wiringPi.h> int main( void){ int LED1 = 1; int LED4 = 4; wir ...

  4. 深入解析Laravel的中间件

    Laravel 中间件是什么? 简而言之,中间件在 laravel 中的作用就是过滤 HTTP 请求,根据不同的请求来执行不同的逻辑操作. 我们可以通过中间件实现以下功能: 指定某些路由 设置 HTT ...

  5. Android 开发学习进程0.11 pageview relativelayout 沉浸式标题栏

    fragment与pageView fragment fragment不可以侧滑切换相关界面,但多数代码位于fragment中,易于维护,同时不会受到多个手势滑动的影响 pageView pageVi ...

  6. 简谈DFS

    所谓DFS就是“不撞南墙不回头”的一种搜索.其时间复杂度为O(V+E). 能算出从起点到终点的全部路径,在算法执行的过程中需要一个visit[vi]数组来维护每个结点的访问情况,这样就能避免重复访问. ...

  7. GitHub标星120K+的JDK并发编程指南，连续霸榜GitHub终于开源了

    前言 在编程行业中,有一个东西是和广大程序员形影不离的,在最一开始接触编程就是配置它的运行环境,然后java / javac,对,这个东西就是jdk 昨天项目刚上线,可以稍微休息一下了,但是猛的闲下来 ...

  8. Vue管理系统前端系列一vue-cli4.x 初始化项目

    目录 项目介绍 技术基础 开发环境 安装工具 快速原型开发 创建项目 配置相关说明 目录结构 项目介绍 lion-ui 是一个基于 RBAC 的管理系统前端项目,采用 vue 和 element-ui ...

  9. /usr/bin/ld: cannot find -lxxx 问题

    linux下编译应用程序常常会出现如下错误: /usr/bin/ld: cannot find -lxxx 意思是编译过程找不到对应库文件.其中,-lxxx表示链接库文件 libxxx.so. 注:有 ...

  10. 计算机网络-应用层（2）FTP协议

    文件传输协议(FTP,File Transfer Protocol)是Internet上使用最广泛的文件传送协议.FTP提供交互式的访问,允许客户指明文件的类型与格式,并允许文件具有存取权限.它屏蔽了 ...