以角度更改代码镜像的高度和宽度答案

【问题标题】：change height and width of codemirror in angular以角度更改代码镜像的高度和宽度
【发布时间】：2019-10-19 01:35:47
【问题描述】：

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

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

最后的样子如下图，对我来说太大了。只是想知道如何调整它的大小以使其高度和宽度更小。

【问题讨论】：

标签： css angular codemirror

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：