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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
JS获取本地地址及天气的方法实例小结
May 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获取301跳转URL简单实例
2013/12/16 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
使用js 设置url参数
2013/07/08 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python人脸识别初探
2017/12/21 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
联想C++笔试题
2012/06/13 面试题
小学生家长意见
2015/06/03 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript