zoukankan      html  css  js  c++  java
  • 浅谈layer.open的弹出层中的富文本编辑器为何不起作用!

    很多童鞋都喜欢用贤心的layui框架。是的,我也喜欢用,方便,简单。但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧。这样的话,个别遇到的问题总是解决不好,但是呢还是那句话,多研究一下,就都会有解决方法的。

    最近做的项目需求就是富文本编辑器要在弹出框中显示,好吧。本来以为可以没任何阻碍,后来发现编辑器在弹出框中总是不灵活,甚至图标都打不开

    我想很多童鞋的写法是这样的:

    1.首先建立编辑器

    1       layui.use('layedit', function() {
    2                 var layedit = layui.layedit;
    3                 layedit.build('demo', {
    4                     height:155
    5                 }); //建立编辑器
    6             });

    2.在弹出框中打开编辑器

    1 $(document).on("click", ".crateNewMsgBtn", function () {
    2     layer.open({
    3     title: '发送新消息',
    4     type: 1,
    5     move: false,
    6     content: $('.newMsgDiv'),
    7     area: ['500px', '500px']
    8 });

    3.发现编辑器可以在弹出框中打开,但是呢,富文本编辑器不起作用。是不是?

    那么这到底是什么原因导致的呢?思来想去,应该是渲染不成功的原因导致的。大家先都是将编辑器在页面中渲染成功了。但是,我们的弹出框打开的时候,一些内在的方法可能会导致渲染出现问题,所以要如何去解决这个问题呢?

    我是这样做的:

     1 $(document).on("click", ".crateNewMsgBtn", function () {
     2         layer.open({
     3             title: '发送新消息',
     4             type: 1,
     5             move: false,
     6             content: $('.newMsgDiv'),
     7             area: ['500px', '500px']
     8         });//打开弹出框   
     9         layui.use('layedit', function() {
    10             var layedit = layui.layedit;
    11             layedit.build('demo', {
    12                 height:155
    13             }); //建立编辑器
    14         });
    15     });

    将建立编辑器写在弹出框之后,这样的话,问题就解决了。就不会出现编辑器不起作用了!

    如果你也遇到这样的问题,可以尝试一下这种方法了

    总结:在用layui的时候,也会遇到各种其他的问题,有时间我会将遇到的问题以及解决方法展示出来,以供遇到同样问题的童鞋参考一下 
    如果还有不懂的童鞋,可以给我留言你的问题。

  • 相关阅读:
    在 Flink 算子中使用多线程如何保证不丢数据?
    日处理数据量超10亿:友信金服基于Flink构建实时用户画像系统的实践
    Java编码技巧之高效代码50例
    codeforces 1284D. New Year and Conference(线段树)
    codeforces 1284C. New Year and Permutation(组合数学)
    codeforces 1284B. New Year and Ascent Sequence(二分)
    Codeforces Hello2020 A-E简要题解
    POJ2456 Aggressive cows(二分)
    POJ3122 Pie(二分)
    POJ3258 River Hopscotch(二分最大化最小值)
  • 原文地址:https://www.cnblogs.com/sxs161028/p/7161202.html
Copyright © 2011-2022 走看看