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去掉字符串里的所有空格
Feb 08 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
js实现九宫格布局效果
May 28 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部分常见问题总结
2008/03/27 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python实现AI换脸功能
2020/04/10 Python
基于python实现对文件进行切分行
2020/04/26 Python
python语言中有算法吗
2020/06/16 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
数组越界问题
2015/10/21 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
大学生活学习的自我评价
2013/12/03 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
检讨书范文1000字
2015/01/28 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年消防工作总结
2015/04/24 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers