layui 富文本编辑器

版权声明：本文为博主原创文章，转载请注明出处，并在文章明显处给出原文链接，微信：1048725765，共同学习前端 https://blog.csdn.net/sxs161028/article/details/74381309
很多童鞋都喜欢用贤心的layui框架。是的，我也喜欢用，方便，简单。但是呢，有时候项目中的需求会不一样，导致我们用的时候，显示效果可能会不一样，好吧。这样的话，个别遇到的问题总是解决不好，但是呢还是那句话，多研究一下，就都会有解决方法的。

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

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

1.首先建立编辑器

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

$(document).on("click", ".crateNewMsgBtn", function () {
    layer.open({
    title: '发送新消息',
    type: 1,
    move: false,
    content: $('.newMsgDiv'),
    area: ['500px', '500px']
});
1
2
3
4
5
6
7
8
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
            }); //建立编辑器
        });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
将建立编辑器写在弹出框之后，这样的话，问题就解决了。就不会出现编辑器不起作用了！

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

总结：在用layui的时候，也会遇到各种其他的问题，有时间我会将遇到的问题以及解决方法展示出来，以供遇到同样问题的童鞋参考一下 
如果还有不懂的童鞋，可以加我vx:1048725765（一定要备注你是在csdn这里加的我，要不然不回复），可以给我留言你的问题。
--------------------- 
作者：苏小苏 
来源：CSDN 
原文：https://blog.csdn.net/sxs161028/article/details/74381309 
版权声明：本文为博主原创文章，转载请附上博文链接！