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怎么把&字符换成"&amp:"
Oct 19 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
js数组的基本使用总结
Jan 18 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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/04/12 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
三种php连接access数据库方法
2013/11/11 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python标准库sched模块使用指南
2017/07/06 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python3实现多线程聊天室
2018/12/12 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
卫生安全检查制度
2014/02/04 职场文书
个人银行贷款担保书
2014/04/01 职场文书
活动倡议书范文
2014/05/13 职场文书
体育节口号
2014/06/19 职场文书
公共场所禁烟标语
2014/06/25 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript