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. canvas图片编辑操作：缩放、移动、保存（PC端+移动端）

    最近在写canvas关于图片的操作,看了网上的代码基本都是不行的,于是就自己写了一个. html代码 <canvas id="myCanvas" width="37 ...

  2. Vue 自定义VueRouter-简版

    主要是思路,自己定义组件的时候可以借鉴 Vue-router的 类图 name options: ==> 记录构造函数中传入的对象,在 new VueRouter的时候传了一个对象( route ...

  3. 代码备忘录--常用的一些Doxygen格式

    1.文件头的格式: /** **************************************************************************** * @file x ...

  4. 导出Excel文件（项目中会遇到很多将一些数据导出Excel或者et）

    最近在项目中,遇到一些需求,就是将数据导出来,以Excel文件为主:就自己简单的做一些demo:供初学者来学习: // 定义一个保存文件的路径位置 SaveFileDialog dlgPath = n ...

  5. python基础 - 切片

    今日学习内容 切片 取一个list或者tuple的部分数据是常见的操作 a = [1,2,3] 比如取第一个数我们可以用a[0]的方式,如果我们想取第一个和第二个就有点困难了,a[0-1]或者a[0] ...

  6. 5 个 Git 工作流，改善你的开发流程

    原文地址:5 Git workflows you can use to deliver better code and improve your development process 原文作者:Vi ...

  7. html+css知识点以及常见的坑

    float 与 绝对定位 共同点:都脱离文档流,不占用原来的位置,后面的内容占有位置 不同点: float后者居上,补齐,且只能在父级盒子内活动,且不能浮动在照片上. 绝对定位脱离文档流后,直接漂浮到 ...

  8. 新建一个Vue项目

    node环境以及vue的安装可查看:https://www.cnblogs.com/renlywen/p/13522869.html 第一步:创建项目 终端输入: vue init webpack d ...

  9. 图解JAVA容器核心类库

    JAVA容器详解 类继承结构图 HashMap 1. 对象的HashCode是用来在散列存储结构中确定对象的存储地址的.   2. 如果两个对象的HashCode相同,即在数组中的地址相同.而数组的元 ...

  10. ArcGis中地理数据库（sde）中概念及常见函数

    以下概念及函数均在在Oracle中配置地理数据库(sde库)中使用: 一．空间类型 1.概念:存储几何数据的数据类型.所有空间信息均存储在空间列中:不存在其他的要素表.将空间信息包含在一个字段中使得在 ...