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

  • 相关阅读:
    将动态aspx页面转换成为静态html页面的几种方法
    IHttpHandler 概述
    .Net,你究竟有多慢
    Js离开提示
    vs2008Webconfig文件
    什么是URL转发和一个IP建多个Web站点主机头名法
    sqlserver 统计sql语句大全收藏
    web.config 读写操作
    httpModules 与 httpHandlers
    简单的介绍一下常用的正规表示式:
  • 原文地址:https://www.cnblogs.com/cfmy/p/13409150.html
Copyright © 2011-2022 走看看