[英]How can i render ngx-quill editor content from my database to a view component?
[英]How can I disable the click button when the editor of ngx-quill is empty in angular?
我在下面使用 ngx-quill 编辑器,可以在其中输入任何文本,它会使用单击按钮显示。 目前我面临的问题是,即使我没有输入任何文本,我也可以点击按钮并继续如下所示:
我希望当此编辑器中没有文本时,按钮应保持禁用状态,而当我键入内容时,它会启用。
在下面的 ts 文件中,我为点击按钮编写了 function。
在 html 文件中有一个羽毛笔编辑器和自定义按钮。 我也在使用 customToolbar。 任何人都可以帮助我如何做到这一点?
components.ts 文件
@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;
public stringMessages: string[] = [];
sendMessage(){
return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
}
组件.html
<quill-editor customToolbarPosition="bottom" id="quill-id" #editor placeholder="Type your message..." [styles]="toolbarStyle">
<span class="ql-formats-send">
<button class="ql-send-button" (click)="sendMessage()"><fa-icon [icon]="faMessage"></fa-icon></button>
</span>
</quill-editor>
components.ts 文件 - 添加文本字段
@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;
public text: string | undefined;
public stringMessages: string[] = [];
sendMessage(){
if (!this.text) {
return;
}
return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
}
component.html - 添加带有文本字段和禁用指令的 ngModel
<quill-editor [(ngModel)]="text" customToolbarPosition="bottom" id="quill-id" #editor placeholder="Type your message..." [styles]="toolbarStyle">
<span class="ql-formats-send">
<button class="ql-send-button" (click)="sendMessage()" [disabled]="!text"><fa-icon [icon]="faMessage"></fa-icon></button>
</span>
</quill-editor>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.