在 angular 中更改 codemirror 的高度和宽度

Question

我正在使用 angular 7 和最新的 ngx-codemirror。

<ngx-codemirror [(ngModel)]="sql_input"  [options]="{lineNumbers: true,theme: 'material',mode: 'markdown'}"></ngx-codemirror>

最终效果如下图，对我来说太大了。只是想知道如何将它的大小调整为更小的高度和宽度。

Answer 1

您可以将组件添加到 wrapper/container 元素中。

<div class="container">
  <ngx-codemirror
    [(ngModel)]="sql_input"
    [options]="{ lineNumbers: true, theme: 'material', mode: 'markdown' }"
  ></ngx-codemirror>
</div>

然后给容器设置需要的宽高。

.container {
  width: 500px;
  height: 500px;
}

Answer 2

您可以尝试在 componentwithcodemirror.css 中添加仅调整文本编辑器的大小

:host() ::ng-deep .CodeMirror{
height:250px
}

Answer 3

如果在组件装饰器中禁用 Angular 视图封装，则可以覆盖 .CodeMirror 样式。将 CodeMirror 选项作为组件提供属性允许您设置 viewportMargin: Infinity，这似乎无法通过直接将其作为 HTML 中的属性提供来实现。将其与 height: auto 结合使用会导致编辑器自动垂直调整大小以适合其内容。

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent implements OnInit {
  @ViewChild('CodeMirror') private cm: any;
  codemirrorOptions = {
    lineNumbers: false,
    lineWrapping: true,
    viewportMargin: Infinity,
  };
  ...

my.component.html:

<ngx-codemirror
  #CodeMirror
  [(ngModel)]="myModel"
  (ngModelChange)="onChanged($event)"
  [options]="codemirrorOptions"
  ngDefaultControl
></ngx-codemirror>

my.component.scss:

.CodeMirror {
  height: auto;
}

在 angular 中更改 codemirror 的高度和宽度

change height and width of codemirror in angular

css

codemirror

angular