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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
node.js通过url读取文件
Oct 16 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
javascript中this的四种用法
2015/05/11 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python字符串格式化输出代码实例
2019/11/22 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
大一自我鉴定范文
2013/12/27 职场文书
仓库主管岗位职责
2014/03/02 职场文书
担保书怎么写
2014/04/01 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
详解OpenCV曝光融合
2022/04/29 Python