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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php外部执行命令函数用法小结
2016/10/11 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python用threading实现多线程详解
2017/02/03 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python常用函数与用法示例
2019/07/02 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
小学一年级学生评语
2014/04/22 职场文书
班干部演讲稿
2014/04/24 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
学校教师安全责任书
2014/07/23 职场文书
经理岗位职责
2015/02/02 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers