Автофокус компонента редактора PrimeNG при загрузке страницы

Я использую компонент редактора библиотеки пользовательского интерфейса PrimeNG. На данный момент версия 6.1.2. Проблема появляется, когда страница загружается, а в Редакторе есть какой-то контент, страница автоматически прокручивается до редактора и фокусируется на нем. Как отключить этот автофокус? Я пытался использовать простой window.scroll(0,0), но это выглядит странно, когда при загрузке страницы он прокручивается вниз, а затем вверх.

Вероятно проблема с текстовым редактором quill, который используется в PrimeNG. В любом случае, есть обходной путь здесь? Спасибо.


angular primeng quill
person Aleksandr Neizvestnyi    schedule 29.08.2018    source источник
comment
Я протестировал его на примере `primeng: ^4.3.0` с `quill: ^1.1.8`. Вроде все нормально и курсор наверху редактора   -  person Ragavan Rajan    schedule 30.08.2018
comment
Спасибо. Обнаружил, что я не одинок: github.com/primefaces/primeng/issues/5244 и github.com/zenoamaro/react-quill/issues/317   -  person Aleksandr Neizvestnyi    schedule 30.08.2018

Ответы (3)


arrow_upward
3
arrow_downward

Мы пришли к следующему решению: пришлось добавить директиву, которая использует метод NgOnChanges (поскольку проблема возникает не только при загрузке страницы, но и при программном изменении контента). Таким образом, при изменении действия стиль отображения меняется на «нет», а затем после тайм-аута отображается элемент.

Директива:

import { Directive, Input, OnChanges, SimpleChange, ElementRef } from "@angular/core";

@Directive({
    selector: '[p-editor-model]'
})
export class PeAutoscrollFixDirective implements OnChanges {
    @Input("p-editor-model") content: string;

    ngOnChanges(changes: { [property: string]: SimpleChange }) {
        let change = changes["content"];
        let elemPosition = this.element.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;

        if (change.isFirstChange() || elemPosition > clientHeight)
        {
            this.element.nativeElement.style.display = 'none';
            setTimeout(() => {
                this.element.nativeElement.style.display = '';
            });
        }
    }

    constructor(private element: ElementRef) {
    }
}

Нужно добавить эту директиву в модуль как объявления и экспорты.

И использование этой директивы выглядит так:

<p-editor [p-editor-model]="model" [(ngModel)]="model"></p-editor>
person Aleksandr Neizvestnyi    schedule 11.12.2018
comment
У меня это работает, но мне пришлось добавить миллисекунды к вызову setTimeout(): setTimeout(() =› { this.element.nativeElement.style.display = ''; }, 1000); - person ohdev; 09.07.2019

arrow_upward
1
arrow_downward

Для тех, кто считает это полезным: это также можно сделать, используя общедоступную переменную для управления атрибутом readonly. Инициализируйте переменную как true, а затем измените ее на false в файле onAfterViewInit.

компонент.ts:

import { OnInit, AfterViewInit } from '@angular/core';

export class myComponent implements OnInit, AfterViewInit {
    public tempReadOnly: boolean = true;

    ngAfterViewInit() {
        this.tempReadOnly = false;
    }
}

компонент.html:

<p-editor [readonly]="tempReadOnly" [(ngModel)]="model"></p-editor>

Вы даже можете использовать дополнительную переменную readonly, если это необходимо, и использовать ее следующим образом:

<p-editor [readonly]="isReadOnly || tempReadOnly" [(ngModel)]="model"></p-editor>
person Carlos Garcia    schedule 25.06.2020

arrow_upward
0
arrow_downward

Вы можете установить отображение стиля редактора: нет, пока ваша страница не загрузится. Как только он загружен, включите его, установите display:inline; используя setTimeout(), если вы используете javascript.

person Yash Shah    schedule 21.11.2018