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 04 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript的继承实现小结
May 07 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 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短域名转换为实际域名函数
2011/01/17 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php单例模式实现方法分析
2015/03/14 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python如何调用百度识图api
2020/09/29 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
比较一下entity bean和session bean
2013/12/27 面试题
餐厅销售主管职责范本
2014/02/19 职场文书
读书小明星事迹材料
2014/05/03 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2014年内勤工作总结
2014/11/24 职场文书
大学生党性分析材料
2014/12/19 职场文书
同学会感言
2015/07/30 职场文书
学习十八大的感悟
2015/08/11 职场文书
Python中的变量与常量
2021/11/11 Python