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 相关文章推荐
javascript Array对象基础知识小结
Nov 16 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
理解javascript中的with关键字
Feb 15 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
node.js操作mysql简单实例
May 25 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Vue使用axios出现options请求方法
2019/05/30 Javascript
python监控文件或目录变化
2016/06/07 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Django静态文件加载失败解决方案
2020/08/26 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
财产公证书样本
2014/04/04 职场文书
征兵宣传标语
2014/06/20 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
vue中data里面的数据相互使用方式
2022/06/05 Vue.js