Redactor editor text format issues with Chrome version 58

Question

We're using Redactor(https://imperavi.com/redactor/) version 10.1.1 and not migrated to Redactor II due to lot of dependencies on project.

Recently We're facing a very weird issue with Chrome version 58. Issues are:

-- Not able to format bold, italic, underline, sup, sub etc. for selected text

Kindly let us know is there any fix for this. Any kind of help would be greatly appreciated.

Update as per accepted work around solution:

// 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(); }, 

Answer 1

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).

Answer 2

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.