Redactor editor text format issues with Chrome version 58 Redactor editor text format issues with Chrome version 58 google-chrome google-chrome

Redactor editor text format issues with Chrome version 58


I think I may have found the solution: It seems that Chrome 58 (sometimes) resets the selection when we call Range.insertNode.

The solution I suggest is to restore the selection when the Redactor adds the selection markers: In the createMarkers function, right after setting the node2 marker, you can add this function call:this.caret.set(node1, 0, node2, 0);

Here's the solution that should fix Redactor for concrete5 (but it should also work for other projects too).


instead of this in 10.2.5 version

Overall you can do like that:rewrite setMarker function:

   setMarker: function (range, node, type) {          var nclone = window.getSelection().getRangeAt(0).cloneRange();          range = range.cloneRange();          try {            var selection = window.getSelection();            range.collapse(type);            range.insertNode(node);            selection.removeAllRanges();            selection.addRange(nclone);          }          catch (e)          {            this.focus.setStart();          }        },

or add fix in createMarkers function:// Provided solution is tested for Redactor version 10.1.1

createMarkers: function()    {      this.selection.get();      var node1 = this.selection.getMarker(1);      this.selection.setMarker(this.range, node1, true);      if (this.range.collapsed === false)      {        var node2 = this.selection.getMarker(2);        this.selection.setMarker(this.range, node2, false);        // Fix for Chrome58 Issues        if (this.utils.browser('chrome')) {              this.caret.set(node1, 0, node2, 0);         }         // End Chrome58 Issues      }      this.savedSel = this.$editor.html();    },

this is working and tested on chrome 60.


original code is like this in both 10.2.2 and 10.2.5

    getNodes: function()                    {                        this.selection.get();                        var startNode = this.selection.getNodesMarker(1);                        var endNode = this.selection.getNodesMarker(2);                        if (this.range.collapsed === false)                        {                            if (window.getSelection) {                                var sel = window.getSelection();                                if (sel.rangeCount > 0) {                                    var range = sel.getRangeAt(0);                                    var startPointNode = range.startContainer, startOffset = range.startOffset;                                    var boundaryRange = range.cloneRange();                                    boundaryRange.collapse(false);                                    boundaryRange.insertNode(endNode);                                    boundaryRange.setStart(startPointNode, startOffset);                                    boundaryRange.collapse(true);                                    boundaryRange.insertNode(startNode);                                    // Reselect the original text                                    range.setStartAfter(startNode);                                    range.setEndBefore(endNode);                                    sel.removeAllRanges();                                    sel.addRange(range);                                }                            }                        }                        else                        {                            this.selection.setNodesMarker(this.range, startNode, true);                            endNode = startNode;                        }how to change it?