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?