Question

我在CKEditor中有一个文档，在CKEditor外面有一个侧面导航。我想在滚动CKEditor中文档的部分时突出显示特定的导航（选中）。

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选择器中添加主机：{'（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。

在angular2中滚动间谍为ckeditor

1 个答案: