关于wangEditor的图片上传失效的解决办法

最新推荐文章于 2025-03-12 19:05:46 发布

原创最新推荐文章于 2025-03-12 19:05:46 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#wangEditor #div根据类名进行循环遍历 #某div内部的元素删除 #页面重新加载

java总结专栏收录该内容

7 篇文章

订阅专栏

本文详述了在使用wangEditor富文本编辑器时，因首页加载即创建编辑器导致的功能失效问题，特别是图片上传功能。通过动态删除并重建编辑器的方法，解决了多次上传数据时的编辑器复用难题。

相信用过wangEditor的程序员（媛）都知道，这是一个轻量级富文本编辑器,每每用它的时候总有一种麻雀虽小，五脏俱全的感觉，挺好用的！

但是偶尔也会有些小坑踩踩，接下了我将介绍一个在我的业务里面遇到的坑。。。

业务介绍，该编辑器我是在上传数据时用到的，每一条数据都会绑定至少一个或者是一个以上的编辑器，为提高效率，我让其在首页加载时就创建所需的编辑器，也避免了在重新打开一条记录进行上传或修改时，编辑器的重复创建。

但是，就是因为这个逻辑，编辑器在首页加载时就创建成功了，当我修改或新上传完一条数据的时候，再点开一条新的记录进行修改操作，或者添加新数据的操作时，编辑器中的图片上传功能，可能还有其他功能，就会失效了，需要重新刷新页面，让编辑器重新加载后，方才可以进行下一步的数据上传工作，如此，没上传一条记录，就尽行一次刷新操作，实在是太麻烦了。。

怎么办呢，推到重来吧。。。

既然他在重新刷新后，编辑器重建后才能生效，就不能让它在首页加载时只创建一次编辑器了。所以，只能让它在用户执行修改，和新建操作时的点击按钮上绑定编辑器创建功能，同时还要删除之前已创建好的编辑器，跟了前台页面以后才知道，创建好的编辑器被div包裹，所以在这里用了一些前台动态删除div的办法。

①自己定义一个div，将要动态生成的编辑器包裹起来，在我定义的div里边，还包裹着图片上传的div，代码如下：

......省略代码
<div class="eiderDiv">  //包裹编辑器的div
        <div id="abstract" name="abstract" style="height:550px;max-height:600px;">//绑定编辑器上传图片功能的div
        </div>
</div>
......省略代码

②编辑器创建在这里不在细说，在这里说一下如何将建好的编辑器删除

由于我的业务需求是多个编辑器，所以我在这里用到了div的循环遍历；

在修改的业务方法里面，代码如下：

。。。。。省略代码
/*清除原编辑器*/
if(editor!=null){
    clearEider();
}
/*创建编辑器*/
creatEider();
。。。。。省略代码

/*清除已生成的编辑器*/
function clearEider () {
 //获取class名为eiderDiv的所有div元素
    var nodes=document.getElementsByClassName("eiderDiv");
/*由于前端页面中的元素是时时刷新变动的，所以务必有这一步将原集合中的长度保留，以免元素新增或删除给循环带来异常*/
    var len=nodes.length;
    //对集合进行循环遍历
    for (var i=len-1;i>=0;i--) {
        //将集合中的每个元素中的页面效果清空
        document.getElementsByClassName('eiderDiv')[i].innerHTML=''; 
    }
/*由于我绑定了编辑器中内容展示的位置，由于上一步将其完全清空，所以这一步不许有，否则前端页面会报编辑器生成时menus报错，但是我这个方法比较笨，我这里有3个编辑器需要生成，需要一一手动添加，大家如果有更好的解决办法，可以在评论里告知我*/

    document.getElementsByClassName('eiderDiv')[2].innerHTML='<div id="abstract2" name="abstract2" style="height:50px;max-height:100px;">\n' +
            '                         </div>';
    document.getElementsByClassName('eiderDiv')[1].innerHTML='<div id="abstract1" name="abstract1" style="height:50px;max-height:100px;">\n' +
            '                        </div>\n' +
            '\t\t\t\t\t\t\t<div>\n' +
            '                    </div>';
    document.getElementsByClassName('eiderDiv')[0].innerHTML='<div id="abstract" name="abstract" style="height:550px;max-height:600px;">\n' +
            '                        </div>';
   //清空表示编辑器的变量中的内容
    editor=null;
    editor1=null;
    editor2=null;
   
}

也可以在用户点击保存后，关掉修改页面，且重新加载当前页面。

$('#active_win').window('close');//关闭活动窗口
window.location.reload();//重新加载当前窗口