Question

我使用ngx-editor为我的MEAN堆栈应用程序创建wysiwyg编辑器。一切都很好，但我想为这个编辑器设置高度。我试图在css文件中设置像

这样的组件的高度

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

但仍然不起作用。

即使我尝试像component

那样从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>

但仍无效。

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

Answer 1

您只需使用height和minHeight属性设置编辑器的高度。

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

Answer 2

这些答案都不适合我，所以我不得不手动编辑一些 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 */
  }
}

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

Answer 3

编辑：请参阅online docs，了解如何通过配置设置minHeight和/或身高。

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

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

编辑：使用resizer =＆＃34; basic＆＃34;除了你会在右下角看到一个小小的夹具外，你会做同上面的事情。

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

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

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

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

Answer 4

ngx编辑器

“ ngx编辑器”在所有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>

Answer 5

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

在您的HTML中

.ts文件创建如下所示的变量

textareaConfig = { “可编辑”：是， '拼写检查'：是的， 'height'：'auto'，//您也可以设置高度 'minHeight'：'100px'， };

Answer 6

我认为以下解决方案应该可行。

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

请参阅属性值内的"'"。

Answer 7

您需要使用绑定属性配置：

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

应该可以。

为Ngx编辑器

7 个答案: