Как установить высоту редактора ace на основе контента с включенной прокруткой, если контент пересекает высоту экрана? - PullRequest
Новая
       56

Как установить высоту редактора ace на основе контента с включенной прокруткой, если контент пересекает высоту экрана?

0 голосов
/ 30 апреля 2020

Создание приложения angular и вот код для загрузки редактора ACE. Я устанавливаю данные в ngAfterViewInit () и определяю размер редактора в ngAfterViewChecked () и включаю прокрутку редактора.

ПРИМЕЧАНИЕ: Прокрутка в браузере отключена

Проблема: С помощью следующего кода я не получаю полосу прокрутки

Машинопись 

    ngAfterViewInit() {
    const element = this.codeEditorElmRef.nativeElement;
    const editorOptions: Partial<ace.Ace.EditorOptions> = {
      highlightActiveLine: true,
      displayIndentGuides: true,
      highlightSelectedWord: true,
    };
    this.codeEditor = ace.edit(element, editorOptions);
    this.codeEditor.setTheme(THEME);
    this.codeEditor.getSession().setMode(LANG);
    this.codeEditor.setShowFoldWidgets(true);
    this.codeEditor.setHighlightActiveLine(true);
    this.codeEditor.setShowPrintMargin(false);
    if (this.data)
      this.codeEditor.setValue(JSON.stringify(this.data, null, '\t'), -1);
    this.codeEditor.setReadOnly(this.readMode);
    if (this.mode)
      this.codeEditor.setReadOnly(this.mode);
  }

  ngAfterViewChecked() {
    this.codeEditor.setOptions({
      maxLines: this.codeEditor.getSession().getScreenLength(),
      autoScrollEditorIntoView: true,
    });
  }

HTML

<div ace-editor #codeEditor [autoUpdateContent]="true" [durationBeforeCallback]="1000" 
(textChanged)="onChange($event)"
(change)="onChange(codeEditor.value)" style="min-height: 600px; width:100%; overflow: auto;">
</div>

Снимок экрана JSON содержимое скрыто и отсутствует полоса прокрутки

1 Ответ

0 голосов
/ 30 апреля 2020

Используйте параметр maxLines, чтобы увеличить размер редактора, в то время как содержимое короче и используйте полосу прокрутки после этого editor.setOption("maxLines", 4)

Также есть опция minLines, которая позволяет установить минимальное количество строк в редакторе. должно быть изменено до когда maxLines определен, по умолчанию это 1.

...