web-dev-qa-db-fra.com

Problèmes de formatage de l'éditeur de rédacteur avec Chrome version 58

Nous utilisons Redactor ( https://imperavi.com/redactor/ ) version 10.1.1 et n'avons pas migré vers Redactor II en raison de nombreuses dépendances du projet.

Nous sommes récemment confrontés à un problème très étrange avec Chrome version 58. Les problèmes sont les suivants:

- Impossible de mettre en forme gras, italique, souligné, supérieur, secondaire, etc. pour le texte sélectionné 

Veuillez nous faire savoir s'il existe une solution pour cela. Toute forme d'aide serait grandement appréciée.

Mise à jour selon la solution de contournement acceptée:

// 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();
},
angularjsgoogle-chromewysiwygtext-editorredactor.js
24
Sandeep

Je pense avoir peut-être trouvé la solution: il semble que Chrome 58 réinitialise (parfois) la sélection lorsque nous appelons Range.insertNode.

La solution que je suggère est de restaurer la sélection lorsque le rédacteur ajoute les marqueurs de sélection: Dans la fonction createMarkers, juste après la définition du marqueur node2, vous pouvez ajouter cet appel de fonction: this.caret.set(node1, 0, node2, 0);

Voici la solution qui devrait résoudre Redactor for concrete5 (mais cela devrait également fonctionner pour d'autres projets).

24
Michele Locati

au lieu de cela dans la version 10.2.5

Globalement, vous pouvez faire comme ça: Réécrire la fonction setMarker:

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

ou ajouter un correctif dans la fonction createMarkers: // La solution fournie est testée pour 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();
    },

cela fonctionne et testé sur chrome 60.

1
Alp Altunel

le code original est comme ça dans 10.2.2 et 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?
0
Alp Altunel