Uploaded image for project: 'ZK CKeditor'
  1. ZK CKeditor
  2. ZKCK-76

CKEditor cause JS error with slideDown and SlideUp in tabbox with accordion mold

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • None
    • 4.18.0.0
    • Security Level: Jimmy
    • ZK 9.6.1
      Java 17
      Spring Boot 2.5.8
      ZK Spring Boot 2.3.0

      Updated ticket

      Steps to Reproduce

      https://zkfiddle.org/sample/1n09ir9/2-Another-new-ZK-fiddle
      Run fiddle
      Click 2nd tab, click 3rd tab

      Current result

      ckez.wpd:374 Uncaught TypeError: Cannot read properties of undefined (reading 'frameElement')
          at CKEDITOR.editor.resize (ckez.wpd:374:338)
          at init._syncSize (ckez.wpd:1624:11)
          at init.onShow (ckez.wpd:1589:9)
          at _invoke (zk.wpd:15655:14)
          at init.fire (zk.wpd:15641:9)
          at _fire (zk.wpd:15798:13)
          at Object.fireDown (zk.wpd:16031:7)
          at Object.fireDown (zk.wpd:17966:28)
          at Object.fireShown (zk.wpd:18870:14)
          at opts.afterAnima (zk.wpd:16484:16)
      

      Expected Result

      No Error

      Debug Information

      Caused by zjq.slideDown and zjq.slideUp called by Tabpanel._sel
      SlideDown/SlideUp create a wrapper copy of the container which they animate
      CKEditor registers mutationobserver listeners on the DOM element of the CKEditor which causes it try to make operations on a non-existent ckeditor object

       

      Also triggered by Groupbox.setOpen (calling slideUp/slideDown)

      Workaround

      modify the Tab widget to allow for skipping animation, add the w:skipAnimation="true" on the tabpannel which contain a ckeditor

      <zk xmlns:w="client" xmlns:ca="client/attribute">
      	
       	<script><![CDATA[
      	zk.afterLoad("zul.tab", function () {
      	    var _xTab = {};
      	    zk.override(zul.tab.Tab.prototype, _xTab, {
      	        _sel: function _sel(toSel, notify) {
      	    	      var tabbox = this.getTabbox();
      	    	      /* ZK-1441
      	    	       * If tabbox is animating (end-user click different tabs quickly), ignore this action.
      	    	       */
      
      	    	      if (!tabbox || tabbox._animating) return;
      	    	      var panel = this.getLinkedPanel(),
      	    	          inAccordion = tabbox.inAccordionMold();
      
      	    	      if (toSel) {
      	    	        var ps;
      
      	    	        if (ps = tabbox.tabpanels) {
      	    	          if (ps._selPnl && ps._selPnl != panel) ps._selPnl._sel(false, inAccordion && !panel.skipAnimation);
      	    	          ps._selPnl = panel; //stored in tabpanels
      	    	        }
      
      	    	        tabbox._selTab = this;
      	    	      }
      
      	    	      if (!this.desktop) return;
      	    	      if (toSel) jq(this).addClass(this.$s('selected'));else jq(this).removeClass(this.$s('selected'));
      	    	      if (panel && panel.isVisible()){	    	    	  
      	    	        panel._sel(toSel, !panel.skipAnimation);
      	    	      }
      
      	    	      if (!inAccordion) {
      	    	        var tabs = this.parent;
      	    	        if (tabs) tabs._fixWidth(toSel); //ZK-2810: don't set height to tabbox when deselect
      	    	      }
      
      	    	      if (toSel) {
      	    	        if (tabbox.isVertical()) tabs._scrollcheck('vsel', this);else if (!tabbox.inAccordionMold()) tabs._scrollcheck('sel', this);
      	    	      }
      
      	    	      if (notify) this.fire('onSelect', {
      	    	        items: [this],
      	    	        reference: this.uuid
      	    	      });
      	    	    }
      	     });
      	});
      ]]></script>
      
       ...
                  <tabpanel w:skipAnimation="true">
                      <ckeditor id="ck1" height="100%" width="100%" />
                  </tabpanel>
      

      Original ticket below

      Steps to Reproduce

      1. run the attached zul
      2. Navigate through tabs until it hangs because of a Javascript error.

      I created a ZK fiddle here : https://zkfiddle.org/sample/3ekf2c8/1-CkEditor-in-accordion-tabs-error

      Current Result

      A Javascript error occurs in the browser console and the navigation between tabs is no longer possible.

      Uncaught TypeError: Cannot read properties of undefined (reading 'frameElement')
      at a.CKEDITOR.editor.resize (ckez.wpd;jsessionid=wlx5i3sealr4:374:338)
      at init._syncSize (ckez.wpd;jsessionid=wlx5i3sealr4:1624:11)
      at init.onShow (ckez.wpd;jsessionid=wlx5i3sealr4:1589:9)
      at _invoke (zk.wpd;jsessionid=wlx5i3sealr4:15655:14)
      at init.fire (zk.wpd;jsessionid=wlx5i3sealr4:15641:9)
      at _fire (zk.wpd;jsessionid=wlx5i3sealr4:15798:13)
      at Object.fireDown (zk.wpd;jsessionid=wlx5i3sealr4:16031:7)
      at Object.fireDown (zk.wpd;jsessionid=wlx5i3sealr4:17966:28)
      at Object.fireShown (zk.wpd;jsessionid=wlx5i3sealr4:18870:14)
      at HTMLDivElement.opts.afterAnima (zk.wpd;jsessionid=wlx5i3sealr4:16484:16)

      Uncaught TypeError: Cannot read properties of undefined (reading 'getComputedStyle')
      at $.CKEDITOR.tools.extend.getComputedStyle (ckez.wpd:111:382)
      at $.getDirection (ckez.wpd:134:386)
      at $.setup (ckez.wpd:404:80)
      at $.x (ckez.wpd:1023:341)
      at ckez.wpd:33:138

      Expected Result

      No error.

      Debug Information

      • Firefox 96.0.3, chrome 99

      JavaScript error :

      Uncaught TypeError: k is null
      resize https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:375
      _syncSize https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:1624
      onShow https://temp.zkfiddle.org:1223/t961/zkau/web/_zv4.16.2.0/js/ckez.wpd:1589
      _invoke https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15677
      fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15663
      _fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:15820
      fireDown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:16053
      fireDown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:17988
      fireShown https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:18892
      afterAnima https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:16506
      fire https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:3206
      fireWith https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:3323
      tick https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:6774
      tick https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:7081
      schedule https://temp.zkfiddle.org:1223/t961/zkau/web/cfa95844/js/zk.wpd:6463

            Jenkins Jenkins
            YannUnil YannUnil
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated: