angular - Quill 编辑器不会因 Angular 中的(模糊)事件而触发

标签 angular quill angular5

我正在使用带有 ngx-quill NPM 包的 Quill 编辑器。一切都很顺利,除了我无法触发(模糊)事件。

现在,我让它在编辑器中的每次文本更改时触发。这是 Controller

ngOnInit() {
  this.adminForm.controls['content'].valueChanges.subscribe(data => {
   console.log('Changed Values', data);
  });
}

这是 HTML:

<quill-editor (change)="validateChange(field)" [formControlName]="field.id" [id]="field.id"></quill-editor>

但是,当然,当我移动到不同的输入时,(更改)事件就会停止触发,并且我找不到访问(模糊)事件的方法。我真正需要的是一个在表单字段失去焦点时触发的可观察对象。我正在使用 Angular 5 响应式(Reactive)(动态)形式。

感谢您的任何想法!!

最佳答案

我使用 quill-editor 进行评论,我想重点检查用户是否未登录,我将他重定向到登录页面,下面有 quill-editor 组件 (onContentChanged)="onContentChanged($event)" 羽毛笔具有的事件发射器。

<quill-editor
    theme="bubble"
    [placeholder]="quillConfig.placeholder"
    [modules]="quillConfig.moduleConfig"
    [(ngModel)]="quillData"
    (onContentChanged)="onContentChanged($event)"
    (onSelectionChanged)="onSelectionChanged($event)"
    (onEditorCreated)="getEditorInstance($event)">
</quill-editor>

现在我将 onContentChanged($event) 函数附加到 (onSelectionChanged) quill eventEmitter,因此检测到某些更改的 quill 组件正在调用

 onContentChanged(event: any) {
    if (!this.userAccount && event.oldRange === null && event.range !== null) {
      this.router.navigate(['/login']);
    }
  }

所以你应该有相同的功能,但检查这个条件

if (range === null && oldRange !== null) {
   //(blur event) occur and do something
}

如果您有更多问题,请随时提问。

关于angular - Quill 编辑器不会因 Angular 中的(模糊)事件而触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47297369/

相关文章:

javascript - 哪些类型的 Javascript (Angular2) 错误会阻止页面完成渲染

javascript - 带有 Meteor 的 QuillJS - 如何将内容插入数据库?

typescript - 选中/未选中时如何选中/取消选中ion-select中的所有选项选择ionic3中的所有选项

angular6 - 如何在 ng-select 中搜索多个字段?

javascript - 鹅毛笔 : How to add links to the editor content that don't get saved to the delta?

javascript - ' Uncaught Error : Can't resolve all parameters for' runtime error when upgrading from Angular 4 to 5. 0.1

node.js - 为什么 npm 抛出错误 "checksum failed while installing @angular/cli"?

jquery - Angular 2、jQuery、*ngFor 不起作用?

javascript - 如何减小 Angular 2、4、6、7、8、9、10 中 vendor.js 的大小?

azure - npm 任务未在 Azure 管道中创建 node_modules 文件夹