zoukankan      html  css  js  c++  java
  • layui表单引入ueditor遇坑记

    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 {
    			 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 的内容

  • 相关阅读:
    Orcale三层嵌套实现分页功能
    在VM虚拟机上安装Microsoft Dynamics CRM 2016 步骤图解及安装注意事项
    CSS 选择器 关系
    C#获取当前程序运行路径的方法集合//获取当前进程的完整路径
    连接QuickBooks Online实现于IOS App数据同步功能的个人记录
    Posix定义的进程线程同步系统调用
    SQL SERVER 数据库事物日志 备份 收缩 腾出空间
    JAVABEAN递归转MAP实现
    第一次迭代——视频点播系统
    cstddef定义了NULL
  • 原文地址:https://www.cnblogs.com/cfmy/p/13409150.html
Copyright © 2011-2022 走看看