在angular2中滚动ckeditor的间谍答案

【问题标题】：Scroll spy for ckeditor in angular2在angular2中滚动ckeditor的间谍
【发布时间】：2017-03-27 05:13:55
【问题描述】：

我在 CKEditor 中有一个文档，在 CKEditor 之外有一个侧边导航。当滚动 CKEditor 中的文档部分时，我想突出显示特定的 nav(selected)。

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()">

【问题讨论】：

标签： angular ckeditor scrollspy

【解决方案1】：

在您的@Component 选择器中添加 host: { '(window:scroll)': 'track($event)' }。

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。

【讨论】：