浅谈layer.open的弹出层中的富文本编辑器为何不起作用!
很多童鞋都喜欢用贤心的layui框架。是的,我也喜欢用,方便,简单。但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧。这样的话,个别遇到的问题总是解决不好,但是呢还是那句话,多研究一下,就都会有解决方法的。
最近做的项目需求就是富文本编辑器要在弹出框中显示,好吧。本来以为可以没任何阻碍,后来发现编辑器在弹出框中总是不灵活,甚至图标都打不开。
我想很多童鞋的写法是这样的:
1.首先建立编辑器
layui.use('layedit', function() {
var layedit = layui.layedit;
layedit.build('demo', {
height:155
}); //建立编辑器
});
2.在弹出框中打开编辑器
$(document).on("click", ".crateNewMsgBtn", function () {
layer.open({
title: '发送新消息',
type: 1,
move: false,
content: $('.newMsgDiv'),
area: ['500px', '500px']
});
3.发现编辑器可以在弹出框中打开,但是呢,富文本编辑器不起作用。是不是?
那么这到底是什么原因导致的呢?思来想去,应该是渲染不成功的原因导致的。大家先都是将编辑器在页面中渲染成功了。但是,我们的弹出框打开的时候,一些内在的方法可能会导致渲染出现问题,所以要如何去解决这个问题呢?
我是这样做的:
$(document).on("click", ".crateNewMsgBtn", function () {
layer.open({
title: '发送新消息',
type: 1,
move: false,
content: $('.newMsgDiv'),
area: ['500px', '500px']
});//打开弹出框
layui.use('layedit', function() {
var layedit = layui.layedit;
layedit.build('demo', {
height:155
}); //建立编辑器
});
});
将建立编辑器写在弹出框之后,这样的话,问题就解决了。就不会出现编辑器不起作用了!
如果你也遇到这样的问题,可以尝试一下这种方法了
总结:在用layui的时候,也会遇到各种其他的问题,有时间我会将遇到的问题以及解决方法展示出来,以供遇到同样问题的童鞋参考一下
如果还有不懂的童鞋,可以给我留言你的问题。
浅谈layer.open的弹出层中的富文本编辑器为何不起作用!的更多相关文章
- OA项目之弹出层中再弹出层
弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...
- layer:web弹出层解决方案
layer:web弹出层解决方案 一.总结 一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...
- layer实现关闭弹出层刷新父界面功能详解
本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会 ...
- layer 关闭当前弹出层
关闭当前框的弹出层 layer.close(layer.index); 刷新父层 parent.location.reload(); // 父页面刷新 关闭iframe 弹出的全屏层 var inde ...
- Vue SPA应用中使用Layer的iframe 弹出层,并且传值
问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...
- layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法
1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...
- layer(jQuery弹出层插件)
弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认 ...
- 在layui layer 弹出层中加载 layui table
layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...
- layer.open获取弹出层的input框的值
使用top.$('#txtReason').val();获取值: //不通过 function unAuditData(id) { parent.layer.open({ type: , title: ...
随机推荐
- RSA加密通信小结(四)--RSA加解密的实际操作与流程小结
在上一篇文章中,我们已经将密钥的生成方法和流程,归纳总结.而本篇主要是讲如何利用密钥进行加解密. 首先,在上一篇文章中的我们生成了很多密钥,证书等等. 在上述生成的文件中,接收服务端加密报文:pkcs ...
- 【RAC】RAC相关基础知识
[RAC]RAC相关基础知识 1.CRS简介 从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...
- 微信支付之统一下单--JAVA版
都说微信支付有些坑,都抱怨微信支付的文档太烂,一会APPId,一会商户id,还有appsecret,支付API秘钥让你傻傻分不清楚,还有这里大写那里小写,几种标准,让你眼花缭乱.没错,这就是很多技术团 ...
- laravel blade模板介绍
第一步:首先写好模板 在sites下新建立一个app.blade.php文件 写入模板如: <!DOCTYPT html><html><head> <titl ...
- Android开发随手记
本文是作者在Android开发实践中的随手速记,记录一些小问题的解决方案和注意事项,持续更新. 以下是速记内容,若有不严谨的地方,望小伙伴们指出. 1.Module 不生成R文件,可尝试取消对该Mod ...
- Ext秒表
Ext秒表 显示分和秒 js Ext.define('xy.StopWatchWindow', { extend: 'Ext.window.Window', width: 300, modal: tr ...
- JavaScript深入之从原型到原型链(本文转载)
JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...
- 学会git玩转github,结尾有惊喜!有惊喜!有惊喜!
一.什么是Github Github是全球最大的社交编程及代码托管网站(https://github.com/). Github可以托管各种git库,并提供一个web界面(用户名.github.io/ ...
- IT小天博客APP版本
今天弄了一个博客的APP版本,感觉还不错,欢迎下载体验. 共 1 张图片 APP名称:[IT小天博客APP] APP版本:1.3 APP上线时间:2017-06-29 下载地址:点击下载
- 详解Linux chgrp和chown命令的用法
Linux chgrp和chown命令是管理员的常用命令,对于初学Linux系统管理的人来说,这对Linux chgrp和chown命令具体的用法这里做一介绍. Linux chgrp命令 功能:改变 ...