Read-Only Rich Text Rendering

[RoboZoom]

Hi, I'm trying to render a read-only version of the component that retains the rich text formatting. I did this by setting the [contentEditable] field to false:

<div class="NgxEditor__Wrapper" *ngIf='canEdit'>
  <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [formControl]='formControl'
    [placeholder]=placeholder
    [contentEditable]='canEdit'
  ></ngx-editor>
</div>

When I set canEdit to true, the component works great. When I set it to false, nothing is rendered.

I created a stack blitz to replicate - I can't quite seem to exactly replicate, but the problem where the Text Box still allows editing persists: https://stackblitz.com/edit/ngx-editor-quickstart-48kags?file=src/app/app.component.ts

I'm sure that this is a common usage - am I doing something wrong here?

[sibiraj-s]

To disable the editor. just use the disabled property as you do for an input element. <ngx-editor disabled></ngx-editor>

[sibiraj-s]

Been not using angular lately, but for reactive forms disabled attributes won't work I guess. disabled is for using with ngModel.

What you are doing is correct, You can also pass the value and link it while creating the control as well.

something like

editor: [{value: '', disabled: this.isDisabled}],

[RoboZoom]

Understand - maybe it would be helpful to add some documentation in the readme about the difference in disabling a reactive versus non-reactive form control.

[sibiraj-s]

Yeah. I can add that. But this is really the angular way, the editor doesn't have any special behaviour so didn't bother much.

Will add in docs.

[RoboZoom]

I wrote it up and submitted a PR to try to be helpful.

[henafufa]

@RoboZoom @sibiraj-s solved, thank you!