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

One of the possible cause is : Issue exist under Chrome 58 as "**Selections inside text controls should be of type Range (not Caret)**" [https://bugs.chromium.org/p/chromium/issues/detail?id=712579] . This issue is fixed but will be available for end user by 6th June 2017. — Sandeep, May 01 '17 at 08:04
concrete5 has the same problem https://github.com/concrete5/concrete5/issues/5406 — Remo, May 01 '17 at 13:22
I am facing the same problem and have explanated the issue in detail. It is caused by document.execCommand('strikethrough') that is not performing the action properly. See here: http://stackoverflow.com/questions/43722113/yii-1-x-imperavi-redactor-execcommandstrikethrough-not-working — Osama Yawar, May 01 '17 at 17:38

score 25 · Accepted Answer · edited Nov 11 '17 at 20:52

25

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

edited Nov 11 '17 at 20:52

1stthomas

731
2
15
22

answered May 02 '17 at 07:53

Michele Locati

1,655
19
25

Thanks Michele for work around solution. Will update very soon after testing it. – Sandeep May 02 '17 at 08:05
Tested and seem working fine. Thank you again Michele. – Sandeep May 02 '17 at 11:02
3

This seems to still have the effect of not being able to highlight and delete sections of text. If you highlight and backspace or delete the contents, only the very first character is deleted. – Buns of Aluminum May 04 '17 at 19:02
@BunsofAluminum i am facing the same issue. Did you find any solution? – Osama Yawar May 05 '17 at 14:13
@Sandeep are you facing the issue highlighted by @BunsofAluminum? – Osama Yawar May 05 '17 at 15:37
@OsamaYawar I have not tried fixing that issue yet. I've been advising users currently to use backspace or another browser. – Buns of Aluminum May 10 '17 at 19:54
@OsamaYawar: That issue were facing but after applying provided solution, it's working fine. – Sandeep May 12 '17 at 07:32
@OsamaYawar: Today some users reported "delete text" issue raised by BunsofAluminum. Did you guys found any solution for this? I'm also debugging this. – Sandeep May 16 '17 at 12:14
5

@BunsofAluminum Setting the caret here will fix the issues of applying text formatting through keyboard shortcuts onto a selection. In order to fix the issue of deleting a selection, you must add the same fix in another place. Update your getNodes() with line 24 here https://gist.github.com/jackpope/4de3a1a5580882375a27833ff7ce6e89 – Jack Pope May 16 '17 at 20:50

score 3 · Answer 2 · answered Sep 16 '17 at 20:17

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.

where and how to use this? – ahmednawazbutt Feb 20 '19 at 09:51 — ahmednawazbutt, Feb 20 '19 at 09:51
open redactor.js then find the function. replace with mine. – Alp Altunel Feb 20 '19 at 11:44 — Alp Altunel, Feb 20 '19 at 11:44

score 0 · Answer 3 · answered Sep 16 '17 at 20:05

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?

how and where to use this in my yii2 widget? – ahmednawazbutt Feb 20 '19 at 09:50 — ahmednawazbutt, Feb 20 '19 at 09:50
in redactor.js file find getnodes and replace it – Alp Altunel Feb 20 '19 at 11:44 — Alp Altunel, Feb 20 '19 at 11:44

Redactor editor text format issues with Chrome version 58

3 Answers3

Linked