Chrome 버전 58의 리액터 편집기 텍스트 형식 문제

Chrome 버전 58의 리액터 편집기 텍스트 형식 문제

Redactor(https://imperavi.com/redactor/) 버전 10.1.1)를 사용하고 있으며 프로젝트 의존도가 높아 Redactor II로 마이그레이션하지 않았습니다.

최근 우리는 Chrome version 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();
},

해결책을 찾은 것 같습니다.Chrome 58(가끔)은 우리가 전화를 걸면 선택을 재설정하는 것 같습니다.Range.insertNode.

Redactor가 선택 마커를 추가할 때 선택 항목을 복원하는 것이 제가 제안하는 해결책입니다.에서createMarkersfunction, 설정 직후node2마커, 다음 함수 호출을 추가할 수 있습니다.this.caret.set(node1, 0, node2, 0);

여기 구체적인 5를 위해 Redactor를 수정해야 하는 솔루션이 있습니다(그러나 다른 프로젝트에도 적용되어야 합니다).

10.2.5 버전에서는 이것 대신에

전체적으로 다음과 같이 할 수 있습니다: rewrite 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 함수에 fix를 추가합니다. // 제공된 솔루션이 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();
    },

이것은 크롬60에서 작동하고 테스트되었습니다.

원래 코드는 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?

언급URL : https://stackoverflow.com/questions/43674400/redactor-editor-text-format-issues-with-chrome-version-58