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鼠标划过切换效果
Jun 30 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
用js实现博客打赏功能
Oct 24 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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中的CMS的涵义
2007/03/11 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python 26进制计算实现方法
2015/05/28 Python
Python中防止sql注入的方法详解
2017/02/25 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python requests 测试代理ip是否生效
2018/07/25 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
pandas分区间,算频率的实例
2019/07/04 Python
Flask-WTF表单的使用方法
2019/07/12 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
大学生职业生涯规划书模版
2013/12/30 职场文书
保险专业求职信
2014/07/07 职场文书
个人主要事迹材料
2014/08/26 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
公司与个人合作协议书
2016/03/19 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python