layui富文本编辑器前端无法取值的解决方法


Posted in Javascript onSeptember 18, 2019

首先,需要简单说下layui这个框架,个人觉得属于那种比较好用的框架,包括他的极简流畅的弹框,很适合那种主要写后端的程序员和快速开发的团队

本期主要讲的是layui富文本编辑器这个东西,他的模式是在某个textarea的基础上建立了一个富文本编辑器,也就是说你填写在富文本编辑器的值其实是放在编辑器里面的,并没有放在之前的textarea中,你获取textarea的值的时候需要先把富文本编辑器的值同步到之前的textarea中,然后才能通过textarea获取对应的值

主要代码如下:

layui富文本编辑器前端无法取值的解决方法

下图是通过浏览器生成的js样式:

layui富文本编辑器前端无法取值的解决方法

通过上图可以发现目前富文本编辑器的值与创建的textarea的值没有关系

注意:我这里用的弹出框动态渲染来做的,不管是静态的还是动态的,一定要在富文本编辑器修饰完成之后才可以同步值,因为html他是按照从上到下的顺序来加载的

如图:需要再提交之前同步数据: layedit.sync(indexs);

layui富文本编辑器前端无法取值的解决方法

indexs 这个参数是创建富文本编辑器后生成的索引,只有通过他才可以取出富文本编辑器的值,

如果跟我一样采用的是动态渲染最好把indexs定义成全局的,不然 在yes这个方法中是拿不到indexs的

然后就可以用id选择器的val()属性去获取了。

还有一点就是执行上传的 时候的返回值,一定要遵循他的规则:

"{\"code\":0,\"msg\":\"上传成功\",\"data\":{\"src\":\""+request.getContextPath() + "/upload/home/"+tempName+ "\"}}";

src后面的图片路径以自己的具体项目为主,这里仅供参考

具体内容可以去layui官方文档查看:http://www.layui.com/doc/modules/layedit.html

以上这篇layui富文本编辑器前端无法取值的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 #Javascript
Typescript的三种运行方式(小结)
Sep 18 #Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 #Javascript
layui的layedit富文本赋值方法
Sep 18 #Javascript
vue语法自动转typescript(解放双手)
Sep 18 #Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 #Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 #Javascript
You might like
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php中的依赖注入实例详解
2019/08/14 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
python运行时间的几种方法
2016/06/17 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python 去除字符串中指定字符串
2020/03/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python中def是做什么的
2020/06/10 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
项目工作说明书
2014/07/29 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书