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 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
vuejs父子组件之间数据交互详解
Aug 09 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新手上路(九)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP中读写文件实现代码
2011/10/20 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python实现控制台打印的方法
2019/01/12 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
考博自荐信
2013/10/25 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
六查六看剖析材料
2014/02/15 职场文书
煤矿安全协议书
2014/08/20 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL