很多童鞋都喜欢用贤心的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的时候,也会遇到各种其他的问题,有时间我会将遇到的问题以及解决方法展示出来,以供遇到同样问题的童鞋参考一下
如果还有不懂的童鞋,可以给我留言你的问题。