角度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'); 

      } 
     } 
    } 

この方法で、ページのスクロールバーを作成できます。