在Angular中更改CodeMirror的高度和宽度

Question

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

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

以下是翻译内容：

最终的效果如下，对我来说太大了。请问如何调整大小以使其在高度和宽度上更小。

- user824624

Answer 1

你可以尝试在你的组件中添加componentwithcodemirror.css来仅调整文本编辑器的大小。

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

- iugs88

Answer 2

您只需将组件添加到包装器/容器元素中即可。

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

然后将所需的宽度和高度设置为容器。

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

- Douglas P.

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;
}

- Steve