web-dev-qa-db-ja.com

Redactorエディターのテキスト形式の問題Chromeバージョン58

Redactor（ https://imperavi.com/redactor/ ）バージョン10.1.1を使用していますが、プロジェクトへの依存関係が多いため、RedactorIIに移行していません。

最近、Chromeバージョン58で非常に奇妙な問題に直面しています。問題は次のとおりです。

-選択したテキストの太字、斜体、下線、sup、subなどをフォーマットできません

これに対する修正があるかどうかをお知らせください。どんな種類の助けも大歓迎です。

受け入れられた回避策に従って更新：

// 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

私は解決策を見つけたかもしれないと思います：_Range.insertNode_を呼び出すと、Chrome 58（時々）は選択をリセットするようです。

私が提案する解決策は、Redactorが選択マーカーを追加したときに選択を復元することです。createMarkers関数で、_node2_マーカーを設定した直後に、次の関数呼び出しを追加できます：this.caret.set(node1, 0, node2, 0);

ここに コンクリート5のRedactorを修正する必要があるソリューション（ただし、他のプロジェクトでも機能するはずです）。

24
Michele Locati

10.2.5バージョンではこれの代わりに

全体として、次のように行うことができます。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();
          }
        },

またはcreateMarkers関数に修正を追加します。//提供されたソリューションはRedactorバージョン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();
    },

これは動作しており、chrome 60でテストされています。

1
Alp Altunel

元のコードは、10.2.2と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