很多童鞋都喜欢用贤心的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的弹出层中的富文本编辑器为何不起作用!的更多相关文章

  1. OA项目之弹出层中再弹出层

    弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...

  2. layer:web弹出层解决方案

    layer:web弹出层解决方案 一.总结 一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...

  3. layer实现关闭弹出层刷新父界面功能详解

    本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会 ...

  4. layer 关闭当前弹出层

    关闭当前框的弹出层 layer.close(layer.index); 刷新父层 parent.location.reload(); // 父页面刷新 关闭iframe 弹出的全屏层 var inde ...

  5. Vue SPA应用中使用Layer的iframe 弹出层,并且传值

    问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...

  6. layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法

    1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...

  7. layer(jQuery弹出层插件)

    弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认 ...

  8. 在layui layer 弹出层中加载 layui table

    layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...

  9. layer.open获取弹出层的input框的值

    使用top.$('#txtReason').val();获取值: //不通过 function unAuditData(id) { parent.layer.open({ type: , title: ...

随机推荐

  1. java入门学习笔记之1(类的定义,代码的编译执行)

    这篇文章讲解Java代码的基本执行过程 我们先抛开各种JAVA IDE,开发工具,只使用文本编辑器,以突出最本质的东西. 在Linux环境下,我们编辑一个文件: vim HelloWorld.java ...

  2. 【VC6.0】getline需要输入2次回车才会结束的BUG修复方法

    原始日期:2013-09-30 23:22 今天看C++Primer的时候发现一个问题,getline需要输入2次回车才会显示结果,上网找了一下,发现是VC6.0的原因,修复原因如下: (1)建立一个 ...

  3. 20170422早会训话,ps:程序出现两次BUG,领导很生气

    针对这种问题: 要讲3点 1.有没有拖团队后腿: 作为一名前端开发人员,对于前端开发的任务,我能够在第一时间完成,保证时间进度,但光做到这一点是不够的,不能只讲究任务,不考虑结果,会不会出现问题造成其 ...

  4. 在Linux与Windows上获取当前堆栈信息

    在编写稳定可靠的软件服务时经常用到输出堆栈信息,以便用户/开发者获取准确的运行信息.常用在日志输出,错误报告,异常检测. 在Linux有比较简便的函数获取堆栈信息: #include <stdi ...

  5. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

  6. Maven转化为Dynamic Web Module

    如今Maven仍然是最常用的项目管理工具,若要将Java Web项目使用Maven进行管理,则首先需要新建Maven项目,然后将其转化为web项目. 在项目右键选择properties,然后点击左侧P ...

  7. [leetcode-563-Binary Tree Tilt]

    Given a binary tree, return the tilt of the whole tree.The tilt of a tree node is defined as the abs ...

  8. 【LeetCode】141. Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ...

  9. 【Android Developers Training】 20. 创建一个Fragment

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. JAVA基础——面向对象三大特性:封装、继承、多态

    JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...