Layer与Ueditor的几个(兼容性)问题及其解决方法

1、插入视频时src变成空白

解决方法:打开ueditor.config.js,在365行找到”whitList”,再往下找到img(403行),确保其数组中有“src”、“_src”、“id”、“style”等字符串,如果没有的话手动添加即可,img改完后再往下找到video,处理方法同img
示例:

img:    ['src', 'alt', 'title', 'width', 'height', 'id', 'style', '_src', 'loadingclass', 'class', 'data-latex'],

video:  ['autoplay', 'controls', 'id', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']

ps.看到有的博客说把whitList改成whiteList,我试过之后发现并没有用。也有的博客直接将inputXssFilter关闭了,其实完全没有必要

2、编辑内容时setContent()失效

有如下几种解决方法:
①延迟加载:
怀疑是组件加载顺序的原因使得setContent无效,因此尝试性地加上延迟,这种方法可能有效,如果依旧没有效果,请继续往下看,代码如下:

setTimeout(function(){
     ue.ready(function(){
        ue.setContent(client.content, false);
     });
},600);

②先销毁再重新渲染:
想到这个方法的原因在于刷新页面后,第一次打开layer弹出层进行编辑时Ueditor是可以正常setContent的,但把当前弹出层关掉再打开就失效了。因此在layer的cancel回调与success回调中先销毁ueditor,下一次打开弹出层时再重新渲染。这样可以顺利解决问题,但是每次销毁与渲染消耗了太多资源,导致加载缓慢,暂时没有想到更好的办法,只能弹一个有阴影的加载层出来掩人耳目。
销毁的代码如下:

        // 判断是否第一次加载弹出层,默认为true
        var isFirstDialog = true;
        layer.open({
            title:t1,
            skin: 'layui-layer-rim', //加上边框
            area: ['850px', '98%'], //宽高
            type: 1,
            shadeClose: false,
            content: $('#divsave'),
            // 点击右上角关闭按钮触发的回调函数
            cancel: function() { 
                destoryUeditor();
            },
            success:function() {
                destoryUeditor();
            }
        });

        // 每次关闭layer时必须销毁ueditor
        function destoryUeditor(){
            ue.destroy();
            isFirstDialog = false;
        }

每次打开弹出层时重新渲染的代码如下:

        // 加上延迟更保险
        setTimeout(function(){
                if (!isFirstDialog){
                    ue = UE.getEditor('editor');
                }
                ue.ready(function(){
                    ue.setContent(client.content, false);
                });
        },600);

        // 如果不需要setContent,比如添加,也需要重新进行渲染
        if (!isFirstDialog){
            ue = UE.getEditor('editor');
        }

最后吐槽一句,不知道怎么回事,贴上来的代码格式都不太对。

你可能感兴趣的:(前端)