각도 2의 ckeditor에 대한 스파이 검색

Question

CKEditor에 문서가 있고 CKEditor 외부에 측면 탐색이 있습니다. CKEditor에서 문서의 섹션이 스크롤 될 때 특정 nav (강조 표시)를 강조하고 싶습니다.

details.component.ts

focusFunction() { 

     if (window['CKEDITOR'].instances['Doc'] == undefined) { 
      window['CKEDITOR']['inline']('Doc'); 
     } 
} 

ngOnDestroy() { 
    this.sub.unsubscribe(); 
    if (window['CKEDITOR'].instances['Doc'] != undefined) { 
     window['CKEDITOR'].instances['Doc'].destroy(true); 
    } 
} 

details.html

 <ul class="nav nav-vertical dls-nav"> 
      <li ng-repeat="entry in leftNav" *ngFor="let entry of leftNav | keys; let i=index " (click)="addActiveClass(i)" [ngClass]="{'active': highlightedDiv === i ,'nav-item no-border' :true }"> 
      <a id="nav_{{i}}" [href]="'#'+entry.key" class="nav-link">{{entry.value}}</a> 
      </li> 

     </ul> 

<div id="Doc" [attr.contenteditable]="isEditable" class="container"  style="text-align: left; position: relative;" [innerHTML]="documentation | sanitizeHtml" (focus)="focusFunction()"> 

Answer 1

호스트를 추가 : { '(창 스크롤)': '트랙 ($ 이벤트)'} @Component 선택기에서.

track($event) { 
     this.section = document.querySelectorAll("section>h1[id]"); 
     //console.log(this.section); 
     let sections = {}; 
     Array.prototype.forEach.call(this.section, function(e) { 
      sections[e.id] = e.offsetTop; 
     }); 
     //console.log(sections); 
     var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; 
     let i = 0; 
     for (let i in sections) { 
      if (sections[i] <= scrollPosition) { 
       //console.log(scrollPosition); 
       if (document.querySelector('.active') != undefined) { 
        document.querySelector('.active').setAttribute('class', ' '); 
       } 
       document.querySelector('#nav_' + i).setAttribute('class', 'active'); 

      } 
     } 
    } 

이렇게하면 페이지에 대한 scrollspy를 만들 수 있습니다.