4

我正在使用ngx-editor为我的 MEAN 堆栈应用程序创建所见即所得的编辑器。一切正常，但我想为这个编辑器设置高度。我试图在 css 文件中为组件设置高度，例如

.ngx-editor[_ngcontent-c4] .ngx-editor-textarea[_ngcontent-c4] {
    height: 300px !important;
}

但它仍然无法正常工作。

即使我尝试像这样从 component.html 文件中设置高度

<div class="form-group">
      <label for="desc">Description</label>
      <app-ngx-editor style="height: 300px" [style]="{'min-height':'320px'}" formControlName="desc" [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>
    </div>

但它仍然无法正常工作。

有人可以告诉我如何设置编辑器的高度吗？我已经浏览了它的文档，但到目前为止没有得到任何帮助。那么有人可以告诉我如何设置它的高度吗？任何帮助和建议都将非常可观

4

7 回答 7

10

height您可以使用和minHeight属性简单地设置编辑器的高度。

<app-ngx-editor height="100px" minHeight="50px"></app-ngx-editor>
于 2018-02-21T12:33:04.527 回答
3

这些答案都不适合我，所以我不得不手动编辑一些 CSS（与 Bootstrap 列一起使用）：

::ng-deep { /* to penetrate <ngx-editor> CSS styling */

  .NgxEditor {
    height: 400px;
    overflow-y: scroll;
  }

  .NgxEditor__Content {
    min-height: 400px; /* make all of the editor area clickable */
  }
}

不确定这是否是最好的解决方案，但它有效:)

于 2021-03-24T17:20:16.283 回答
1

有一种方法可以设置工具栏的最小和最大高度使用配置来设置最小和最大高度

在您的 HTML 中

.ts 文件创建如下变量

textareaConfig = { 'editable': true, 'spellcheck': true, 'height': 'auto', // 你也可以设置高度 'minHeight': '100px', };

于 2019-01-07T08:25:24.460 回答
0

ngx 编辑器

“ngx-editor”支持以下所有 html 内联属性。

editable: boolean;
    /** The spellcheck property specifies whether the element is to have its spelling and grammar checked or not. */
    spellcheck: boolean;        
    /**The translate property specifies whether the content of an element should be translated or not.*/
    translate: string;
    /** Sets height of the editor */
    height: string;
    /** Sets minimum height for the editor */
    minHeight: string;
    /** Sets Width of the editor */
    width: string;
    /** Sets minimum width of the editor */
    minWidth: string;
     /**
     * The editor can be resized vertically.
     *        
    resizer: string;

所以你可以像下面这样简单地使用它：

<app-ngx-editor height="400"  minheight="200" width="400" minWidth="400"> </app-ngx-editor>
于 2018-12-29T06:59:20.187 回答
0

您需要使用绑定属性 config ：

<app-ngx-editor [config]="configName" [spellcheck]="true" [(ngModel)]="myTextArea"></app-ngx-editor>

然后在您的组件 ts 中，就在您的导出类下：

export class ClassName implements ***** {
configName= {
    editable: true,
    height: '10rem',
    minHeight: '5rem',
    placeholder: 'Type here',
    translate: 'no'
  };

那应该行得通。

于 2021-08-09T12:48:53.867 回答
0

我认为下面的解决方案应该有效。

<app-ngx-editor [height]="'100px'" [minHeight]="'50px'"></app-ngx-editor>

请看"'"里面的属性值。

于 2019-05-27T12:33:53.650 回答
0

编辑：请参阅在线文档，了解如何通过配置设置 minHeight 和/或高度。

然而......我注意到的是，在 minHeight 和 height 之间，没有办法限制高度。因此，我仍然使用我原来的答案，并且还删除了 grippie ......

:host app-ngx-editor /deep/ .ngx-editor-grippie {
    display:none;
}

编辑：使用 resizer="basic" 将与上述相同，但您会在右下角看到一个小抓手。

我关于如何通过对主机组件样式的深度引用直接设置 CSS 的原始答案......

您可以通过设置其现有样式类的属性来设置ngx-editor的文本区域的高度，例如：heightngx-editor-textarea

:host app-ngx-editor /deep/ .ngx-editor-textarea {
    height:100px !important;
}

在回答与ngx-quill相关的类似用例时向Phil Flash提出建议。尽管他在元素上设置和使用，但我的解决方案使用现有的类，并且可能在将来的版本中重命名该类。id

于 2018-01-26T20:05:25.287 回答