Ngx-quill: how to set the height of the editor ?

[PhilFlash]

Hi,
I'm using angular 4 + reactive forms.
How to set the height of the editor ?

[KillerCodeMonkey]

with css?

i am using the snow quilljs theme, where the class .ql-editor sets the hieght to 100%.

So you can overwrite the height property of the .ql-editor class or wrap the whole editor in another container with a fixed height

[PhilFlash]

OK, for me 2 solutions.
Solution 1:
If you use angular-cli and a html like this:

<div class="form-group row">
        <label for="discipline-qe" class="col-sm-12 col-md-2 col-form-label col-form-label-sm">Disciplines
         </label>
        <div class="col-sm-12 col-md-10">
          <quill-editor #disciplineQE id="discipline-qe"
                        placeholder="Vous disposez de 1 000 caractères pour décrire vos principales disciplines."
                        formControlName="discipline"></quill-editor>
        </div>
      </div>

The css for the component is:

:host #discipline-qe /deep/ .ql-container{
  height: 250px;
}

Solution 2
The component editor for prime-ng is based on quilljs.
https://github.com/primefaces/primeng/blob/master/src/app/components/editor/editor.ts

For the height, the library used style like this:

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

To use this solution, I have patched quill-editor.component.ts
Add:

@Input() style: any; 

Replace

 this.elementRef.nativeElement.insertAdjacentHTML('beforeend', '<div quill-editor-element></div>');

By:

let qcstyle = ''; 
if (this.style) {
  for (const field in this.style) {
    if (this.style.hasOwnProperty(field)) {
      qcstyle += '' + field + ': ' + this.style[field] + ';';
    }
  }
  qcstyle = 'style=\'' + qcstyle + '\'';
}
this.elementRef.nativeElement.insertAdjacentHTML('beforeend', '<div quill-editor-element ' + qcstyle + '></div>');

Usage:

<quill-editor #titleQE id="description-qe" [style]="{'height': '200px', 'background-color': 'lightgrey'}"
    formControlName="description"></quill-editor>

Philippe

[KillerCodeMonkey]

i do not get it why you want to patch the component...
the style attribute is the default dom property for each dom element (this has nothing to do with angular).

you can

simply set
<quill-editor style="height: 250px"></quill-editor>

this will be the total height of the editor + toolbar.
and through the default ql-editor css class, the editor has a height of 100% ... so simply set the height per css or property binding [style]="{height: '250px'}" only if you need set this value dynamically.

there is no need to change something at the ngx-quill source code?

[PhilFlash]

Hi,
here a plunker to test height
https://embed.plnkr.co/Q2TbofVNoqqn3xbwadoi/

Description 1 use style="height: 300px" => no effect

Description 2 use css => OK

 :host #description2-qe /deep/ .ql-container {
          height: 250px;
        }

My patch is for change the height of the editor (quill-editor-element).
The plunker doesn't test the patch.

Philippe

[KillerCodeMonkey]

i released a new version 1.4.0 where you can set a style property and a hash of style properties.
I even added an example to my ngx-quill-example repo where i set the height.

[PhilFlash]

OK. Thanks

[21511012]

bbbb

[manuchadha1979]

Example - This works <quill-editor [style]="editorStyle" [modules]="editorConfig" id="hints" type="text" class="form-control" formControlName="hints" [ngClass]="validateField('hints')"></quill-editor>

The .ts code is

.ts editorStyle = { 'height': '300px' }

editorConfig = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link'] // link
]
};

[KillerCodeMonkey]

Seems Like The Editor has a height of 300px, but your Container around has
Not.

Pleased Check your other stylings.

I Set the height in my Demo repo in The Same way to 200px and IT is Wirkung.

manuchadha1979 [e-mail] schrieb am Fr., 28. Feb. 2020,
20:06:

Example - This works [modules]="editorConfig" id="hints" type="text" class="form-control"
formControlName="hints" [ngClass]="validateField('hints')">

The .ts code is

.ts editorStyle = { 'height': '300px' }

editorConfig = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from
theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link'] // link
]
};

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/58?email_source=notifications&email_token=AARI4YD7AB24VZN5UHJTRBDRFFOB5A5CNFSM4DX2D2DKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENJY4TQ#issuecomment-592678478,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YBK6LKUXDP3HHEG47TRFFOB5ANCNFSM4DX2D2DA
.