How do you make an anchor link non-clickable or disabled in text editor-CodePudding

Need to disable the hyperlink also in text editor. The feild is already disabled as [readonly]="true". But the hyper link attached to the p-editor is clickable.

Code:

<label for="notice">Notice<span class="mandatory">*</span></label>
<p-editor [readonly]="isViewDisable" [attr.disabled]="(isViewDisable)" formControlName="noticeText" [(ngModel)]="noticeText" [style]="{'height':'320px'}" [ngClass]="{ 'is-invalid': submitted && p.noticeText.errors }" #editor appRequired>
  <ng-template pTemplate="header">
    <span class="ql-formats">
      <select class="ql-size">
         <option value="small"></option>
         <option selected></option>
         <option value="large"></option>
         <option value="huge"></option>
      </select>
      <button class="ql-bold" aria-label="Bold"></button>
      <button class="ql-italic" aria-label="Italic"></button>
      <button class="ql-underline" aria-label="Underline"></button>
      <span class="ql-formats">
         <button class="ql-list" value="ordered"></button>
         <button class="ql-list" value="bullet"></button>                                    
         <select title="Text Alignment" class="ql-align" >
            <option selected>Gauche</option>
            <option value="center" label="Center"></option>
            <option value="right" label="Right"></option>
            <option value="justify" label="Justify"></option>
         </select>
      </span>
    <span class="ql-formats">
      <button class="ql-link" aria-label="Link"></button>
      </span>
    </span>
  </ng-template>
</p-editor>
</div>

CodePudding user response：

You need to add a disabled class please have a look at below

.disabled {
   pointer-events: none
 }


<p-editor [ngClass]="{'disabled':isViewDisable}" [readonly]="isViewDisable" [attr.disabled]="(isViewDisable)" formControlName="noticeText" [(ngModel)]="noticeText" [style]="{'height':'320px'}" [ngClass]="{ 'is-invalid': submitted && p.noticeText.errors }" #editor appRequired>
  <ng-template pTemplate="header">