Ueditor富文本编辑器 destroy 方法销毁后重建出现的各种问题解决方案

Ueditor富文本编辑器 destroy 方法销毁后重建出现的各种问题解决方案

问题背景:

    首先我的Ueditor富文本是直接嵌入到form中的,如果是嵌入在iframe中可能不会有问题?我的工作场景是:由于后端管理页面全部基于无刷新的ajax实现的,所以通过UE.getEditor('editor')初始化页面后,再次调用该方法是不起作用的,除非刷新页面。但是我的业务要求每次进入页面时候都需要使用不同的参数初始化Ueditor,经过查询解决方案最终选用先销毁后重建的方式来达到要求。

问题描述:

    调用UE.getEditor('editor').destroy()后,确实重新初始化了ueditor(可通过 debug 富文本的后台初始化方法确认),但是留了个小尾巴,原来显示Ueditor富文本的区域上方多了个默认的textarea,在网上查询了几种方法,有说单独删除textarea的,这种方法对我来说没任何效果,还有说直接调用UE.delEditor这个方法的,倒是有点作用,不过二次进入的时候,布局直接错位了,原因是这个方法本身是destroy方法执行完后再执行的一个方法,你现在直接调用了,那结果就是会直接删除富文本原有位置元素,而在调用初始化方法的时候在页面底部给你加载一个默认的Ueditor编辑器。

问题分析:

    排查问题的过程不可以放过任何一个细节,我在遇到问题的时候其实通过控制台发现了一个报错信息,如下,但是我当时忽略了,回过头了才发现这个问题才是根源,追踪源码发现报错区域:me.iframe.offsetWidth + 'px',这里me.iframe是undifine,所以才报的错,导致destroy无法顺利执行完,才会出现textarea哪个小尾巴。

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
    at UE.Editor.destroy (ueditor.all.js:6838:46)
    at setEditor (common.js:48:28)
    at HTMLButtonElement.<anonymous> (tbTemplate:331:16)
    at Function.c (layui.all.js:2:6348)
    at n.each (layui.all.js:2:5700)
    at Array.<anonymous> (layui.all.js:2:6564)
    at n.each (layui.all.js:2:5648)
    at n.event.n.event (layui.all.js:2:6451)
    at HTMLButtonElement.<anonymous> (layui.all.js:5:106101)
    at HTMLDivElement.dispatch (layui.all.js:3:22333)

解决问题:

    既然me.iframe为空,但是我们还需要获取到编辑器的长与宽去初始化编辑器,所以就要考虑其他方式去获取长和宽,debug发现其实编辑器有个container属性,通过me.container可以获取到编辑器的长和宽,所以destroy方法修改如下就可以解决问题了。

destroy: function () {
            var me = this;
            me.fireEvent('destroy');
            var container = me.container.parentNode;
            var textarea = me.textarea;
            if (!textarea) {
                textarea = document.createElement('textarea');
                container.parentNode.insertBefore(textarea, container);
            } else {
                textarea.style.display = ''
            }

            textarea.style.width = me.iframe.offsetWidth + 'px';
            textarea.style.height = me.iframe.offsetHeight + 'px';
            //这个地方也会报错,初始化的时候基本不需要内容,所以直接注释掉就好
            /*textarea.value = me.getContent();*/ 
            textarea.id = me.key;
            container.innerHTML = '';
            domUtils.remove(container);
            var key = me.key;
            //trace:2004
            for (var p in me) {
                if (me.hasOwnProperty(p)) {
                    delete this[p];
                }
            }
            UE.delEditor(key);
        }

总结:

    以上是我遇到的问题以及具体的解决方案,每个人遇到的问题细节可能有所不同,仅供参考。如果有想快速建设企业或者博客网站的,不妨关注下我们的diy自助建站平台,基于Java语言SpringBoot框架实现的建站系统,有更高的安全性、稳定性以及超高性能,而且价格优惠,百元建站,万元品质保障!如果有高端响应式(Bootstrap、TailwindCSS)建站网站模板或者各类建站素材的需求也可以关注我们的资源频道。