当前位置:首页 > 编程技术 > 正文内容

layui表单引入ueditor遇坑记

yc8881年前 (2023-01-30)编程技术295

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">重置<span cl

本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10457.html

分享给朋友:

“layui表单引入ueditor遇坑记” 的相关文章

【说站】Thymeleaf报错Error resolving template “XXX”

【说站】Thymeleaf报错Error resolving template “XXX”

修改了一下开源项目的目录结构访问突然报错Error resolving template “XXX”可能原因有如下三种:第一种可能:原因:在使用springboot的过程中,如果使用thymeleaf...

【说站】用一句话就可以去除宝塔面板操作上的二次验证

【说站】用一句话就可以去除宝塔面板操作上的二次验证

用过宝塔的朋友应该都会发现,现在宝塔面板有些鸡肋的功能,删除文件、删除数据库、删除站点等操作都需要做计算题!不仅加了几秒的延时等待,还无法跳过!这时候就会有朋友在想,如何去除宝塔面板的二次验证,此篇文...

【说站】利用Webhook实现Java项目自动化部署

【说站】利用Webhook实现Java项目自动化部署

用webhook就能实现Java项目自动部署,其实原理很简单。费话不多说,直接往下看教程。1. 创建gitee仓库并初始化2. 在linux安装git3. 在宝塔的软件的商店里下载Webhook4....

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...

【说站】C#在PDF中添加墨迹注释Ink Annotation的步骤详解

【说站】C#在PDF中添加墨迹注释Ink Annotation的步骤详解

PDF中的墨迹注释(Ink Annotation),表现为徒手涂鸦式的形状;该类型的注释,可任意指定形状顶点的位置及个数,通过指定的顶点,程序将连接各点绘制成平滑的曲线。下面,通过C#程序代码介绍如何...

【说站】Java从resources读取文件内容的方法有哪些

【说站】Java从resources读取文件内容的方法有哪些

本文主要介绍的是java读取resource目录下文件的方法,比如这是你的src目录的结构├── main│ ├── java│ │ └── ...