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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 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
JS 动态加载脚本的4种方法
2009/05/05 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
wxPython实现文本框基础组件
2019/11/18 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年团委工作总结
2014/11/13 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
运动会入场词
2015/07/18 职场文书
django上传文件的三种方式
2021/04/29 Python