layui 中使用form表单提交多个layedit富文本内容

最新推荐文章于 2024-05-03 10:07:55 发布
置顶 最新推荐文章于 2024-05-03 10:07:55 发布
阅读量2.9k 收藏 4
点赞数 3
分类专栏： layui layedit layui富文本 文章标签： layui layedit layui富文本提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32837111/article/details/108023166
版权
layui 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
layui富文本
2 篇文章 0 订阅
订阅专栏
layedit
1 篇文章 0 订阅
订阅专栏

今天在写单页面中提交多个layedit富文本内容时发现用传统的form表单提交是无法将layedit中的标签内容提交的，原因是layui layedit富文本是将textarea当做目标元素进行渲染的，所以textarea中仅显示原生textarea中的内容，无法直接获取layedit中的带标签文本内容，下面我们就对单页面多layedit进行说明

首先我们要在textarea中添加 lay-verify ，如图：
在这里插入图片描述
接下来进行调用 layedit 如图：
在这里插入图片描述
这样就好了？ 错，这只是完成了 layedit 的调用，实际无法将其中的带标签的内容进行提交，仅能对 textarea中的文本进行提交，下面关键来了 如图：
在这里插入图片描述

陌家小白
关注
专栏目录
前端框架Layui学习三：表单元素、表单对象
zhengzaifeidelushang的博客
07-15 934
Layui layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。 表单元素 单行输入框 required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class=“layui-input”：layui.css提供的通用CSS类 <form class="layui-form" action=""> <div class="layui-form-item">
LayEdit(layer 富文本编辑器使用，包含图片的上传)
10-18
layer 富文本编辑器layedit与form的使用，包含form提交时获取富文本的内容以及编辑器的图片上传
layui富文本
JavaNotes的博客
10-29 1050
https://liuyanzhao.com/6223.html https://www.cnblogs.com/NCL--/p/7927669.html      layedit.set({          uploadImage: {              url: '/common/upload/uploadTextareaImage', //接口url              t...
使用layui框架完成多图片上传以及layui的富文本功能
Amelian的博客
07-02 1907
1.更多资料查看layui的官网：https://www.layui.com/doc/ 2. layui的富文本 2.1 遇到的问题 1）当我在form表单中嵌入layui框架的富文本的时候，想将用户填写在表当上的文本一起随其他input内容提交到后台，发现取不到layui富文本框下的文本 2.2 注意点 要查看官方文档查看富文本的创建的顺序，比如在富文本中的图片上传的配置要在初始化富文本之前 对于要在函数体外使用到的变量，可以使用全局创建的方法，比如：var index, layedit, layer;
使用layui+java实现富文本添加多张图片实现存储
qq_39252591的博客
10-14 1526
1.第一步详细阅读layui的官方文档(富文本) 文档的地址：https://www.layui.com/doc/modules/layedit.html 2.第二步根据需求编写html代码 3.第三步根据layui文档编写js中的代码 4.编写一个上传文件的类用来存储图片以及存储图片的地址 这里用到的目录需要读者自己定义 ...
js向表单提交 php处理,js富文本处理和表单提交功能实例详解
weixin_32824711的博客
03-12 209
本文主要和大家分享js富文本处理和表单提交功能实例详解，主要以代码的形式和大家分享，希望能帮助到大家。一,js处理富文本function decodeHtml(s) {var HTML_DECODE = {"">": ">","&": "&"," ": " ",""": "\"","©": ""// Add more};var REGX_HTML_ENCODE = /"...
使用layui 的layedit定义自己的toolbar方法
10-16
在本文中，我们将深入探讨如何在 layui 中使用 layedit 编辑器定义自定义的 toolbar。 layedit 是 layui 提供的一个富文本编辑器组件，它具有简洁的界面和基本的编辑功能，如字体调整、对齐方式、列表等。然而，...
layui 富文本编辑器和textarea值的相互传递方法
10-16
这样的功能在开发富文本编辑器相关应用时非常有用，比如在表单提交前需要预览内容，或者从数据库加载已有的数据到编辑器中编辑。 需要注意的是，Layui富文本编辑器的API可能会随着版本更新而发生变化，因此在使用时...
LayUI富文本域使用案例
最新发布
2401_84152825的博客
05-03 755
1、看视频进行系统学习这几年的Crud经历，让我明白自己真的算是菜鸡中的战斗机，也正因为Crud，导致自己技术比较零散，也不够深入不够系统，所以重新进行学习是很有必要的。我差的是系统知识，差的结构框架和思路，所以通过视频来学习，效果更好，也更全面。关于视频学习，个人可以推荐去B站进行学习，B站上有很多学习视频，唯一的缺点就是免费的容易过时。2、读源码，看实战笔记，学习大神思路“编程语言是程序员的表达的方式，而架构是程序员对世界的认知”。所以，程序员要想快速认知并学习架构，读源码是必不可少的。
layui中集成ueditor富文本编辑器
六个木啊
11-06 5727
首先，在你的layui项目结构中引入ueditor， 然后 var um = UE.getEditor(‘myEditor’);创建编辑窗口， 通过 UE.getEditor(‘myEditor’).getContent()获取编辑器中的内容 myEditor 为 你想要在哪里输入文本框的id <div class="layui-input-block"> ...
layui的layedit富文本赋值方法
12-13
layedit赋值方法如下 /** * 设置编辑器内容 * @param {[type]} index 编辑器索引 * @param {[type]} content 要设置的内容 * @param {[type]} flag 是否追加模式 */ layedit.setContent(index, content, flag); flag是true，是追加模式， flag是false，赋值模式 以上这篇layui的layedit富文本赋值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
单页面使用多个编辑器
dianrong7450的博客
08-31 491
1.单独写一个生成编辑器的 a.html， 2.通过iframe标签引入b.html页面。 3.使用按钮添加或删除iframe，并且动态给每一个iframe添加id和name。 4.切如果iframe所在的标签是隐藏的话，是不会显示的，所以想要做成切换效果就使用opcity：0；透明度，加定位方法。 5.子页面内容 <div class="containerDi...
一个页面引用多个富文本（简单方法）
weixin_46565787的博客
09-09 2229
看了很多关于富文本框在一个页面内多次使用的例子，可以为了代码的整洁进行封装组件，这些网络例子特别多，本文就不概述，本文要讲述的是最简单的方法，就是实例化两次，就是引用两次富文本组件，则需要引用两次。如下进行代码的演示： 第一处使用： <el-form-item label="题目解析" prop="analysis"> <quill-editor v-model="form.analysis" ...
LayUI ---layedit编辑器 在进行from表单中的使用 --无法获取值和从后台获取值进行赋值
zhang_cl_cn的博客
05-24 3288
首先抛出官方文档的地址：富文本编辑器 简单示例： <!--前提是已经将所需要的js以及css文件进行引入过了--> <textarea id="demo" style="display: none;"></textarea> <script> layui.use('layedit', function(){ var layedit = layui...
layui富文本layedit详解
fire__hero的博客
10-21 5530
官方文档 官方文档的功能菜单目录并没有放出 layedt ，可能是因为功能还不够齐全吧。 要直达 layedit 的文档就要在官方文档顶部搜索 layedit。 用法 <textarea id="demo" class="layui-textarea"></textarea> <script> layui.use('layedit', function(){ var layedit = layui.layedit; layedit.build('demo');
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
03-17 1865
html内容 <div class="layui-form-item"> <label class="layui-form-label">信息内容</label> <div class="layui-input-block"> <textarea id="L_c_content" name="c_content" style="display: none;".
LayUI - 富文本编辑器
热门推荐
学弟不想努力了
11-30 2万+
一个做后端的猿，难免用到LayUI，首先在这里，不推荐使用，坑多 一、富文本编辑器 缺点：功能太少，只能满足简单需求，只有下面这几个功能 废话少说，直接丢代码 html部分 <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <div> <!-- 引入layui语法 --> <texta.
Layui 弹出text输入框, 多行,
BIG.KE的博客
06-04 3591
// 审核备注 layer.prompt({ formType:2, title: '转账备注' , area:['500px','150px'], },function(value,index,elem){ alert(value); layer.close(index); ..
layui 多个form表单只提交一个
03-31
首先，给每个需要提交的表单设置一个唯一的 id，然后在页面加载完成后，使用 layui 的 form.on() 方法监听表单提交事件，当任意一个表单提交时，获取该表单的数据并存储到一个全局变量中，然后阻止表单提交。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值