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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序实现拖拽功能
Sep 26 Javascript
原生js实现随机点名
Jul 05 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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/06/09 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python的print用法示例
2014/02/11 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python多进程同步简单实现代码
2016/04/27 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python中format()函数的简单使用教程
2018/03/14 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
银行竞聘演讲稿范文
2014/04/23 职场文书
质量承诺书格式
2014/05/20 职场文书
好的促销活动方案
2014/08/21 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript