Set custom height for Ngx Editor

Question

I am using ngx-editor for creating wysiwyg editor for my MEAN stack application. Everything is working fine but I want to set height for this editor. I have tried to set height in the css file for the component like

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

but still its not working.

Even I tried to set height from the component.html file like this

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

but still its not working.

Can someone tell me how to set the height for the editor? I have gone through its docs but not got any help so far. So can someone tell me how to set its height? Any help and suggestions will be really appreciable

Answer 1

You can simply set the height of the editor using height and minHeight properties.

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

Answer 2

None of these answers worked for me, so I had to edit some CSS manually (was using with Bootstrap columns):

::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 */
  }
}

Not sure if it's the best solution, but it works :)

Answer 3

There is a way to set the min and max height of the toolbar Use configuration to set the min and max height

in your HTML

.ts file create a variable like below

textareaConfig = { 'editable': true, 'spellcheck': true, 'height': 'auto', // you can also set height 'minHeight': '100px', };

Answer 4

EDIT: Refer to online docs, on how to set minHeight and/or height via the config.

However... what I noticed is that between minHeight and height, there is no way to restrict the height. Therefore, I still use my original answer, and also removed the grippie...

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

EDIT: Using resizer="basic" will do the same as above with the exception that you will see a small grippie on the lower right corner.

My original answer on how to directly set CSS via deep reference to host component styling...

You can set the height of the ngx-editor's text area by setting property height of its existing style class named ngx-editor-textarea, like:

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

Props to Phil Flash for his suggestion while answering a similar use case related to ngx-quill. Although he sets and uses id on the element, my solution uses the existing class, and may in future release that rename the class.

Answer 5

ngx-editor

"ngx-editor" supports below all html inline attributes.

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;

So you can use it simply like below:

<app-ngx-editor height="400"  minheight="200" width="400" minWidth="400"> </app-ngx-editor>

Answer 6

I think below solution should work.

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

Please see the "'" inside the attribute value.

Answer 7

You need to use an binding attribute config :

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

Then in your component ts, just under your export class :

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

That should work.