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 AJAX 框架的使用方法
Nov 03 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 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从数组中随机抽取一些元素的代码
2012/11/05 PHP
php定时执行任务设置详解
2015/02/06 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JS控制表格隔行变色
2006/06/26 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python的继承知识点总结
2018/12/10 Python
PyQt5实现简易计算器
2020/05/30 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
《乌塔》教学反思
2014/02/17 职场文书
老公爱的承诺书
2014/03/31 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
七年级数学教学反思
2016/02/17 职场文书