如何在文本编辑器中使锚 link 不可点击或禁用
How do you make an anchor link non-clickable or disabled in text editor
还需要在文本编辑器中禁用 hyperlink。
该字段已被禁用,因为 [readonly]="true"。
但是附加到 p-editor 的 hyper link 是可以点击的。
代码:
<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>
您需要添加一个禁用class请看下面
.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">
还需要在文本编辑器中禁用 hyperlink。 该字段已被禁用,因为 [readonly]="true"。 但是附加到 p-editor 的 hyper link 是可以点击的。
代码:
<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>
您需要添加一个禁用class请看下面
.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">