cannot click on font

[andrejm7]

cannot click on font

why can't I change the font?

editorConfig: AngularEditorConfig = { editable: true, spellcheck: true, height: 'auto', minHeight: '350px', maxHeight: '350px', width: 'auto', minWidth: '0', translate: 'yes', enableToolbar: true, showToolbar: true, placeholder: 'Digite o texto aqui...', defaultParagraphSeparator: '', defaultFontName: '', defaultFontSize: '', fonts: [ { class: 'arial', name: 'Arial' }, { class: 'times-new-roman', name: 'Times New Roman' }, { class: 'calibri', name: 'Calibri' }, { class: 'comic-sans-ms', name: 'Comic Sans MS' } ], sanitize: true, toolbarPosition: 'top', toolbarHiddenButtons: [ ['italic', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'customClasses', 'link', 'unlink', 'insertImage', 'insertVideo', 'insertHorizontalRule', 'removeFormat', 'toggleEditorMode'] ] [};

[mapitPhonegap]

Hi, have you solve this issue?

[andrejm7]

not yet friend.. if you have the solution please let me know.

[dgrozenok]

In my case the problem was with zone.js patch and angular-material module usage. I don't remember why, but I added

import 'zone.js/dist/zone-patch-rxjs';

to polyfills.ts

This appeared to be causing the issue in combination with the mat-button directive used in any of the elements on the page.

Just to be clear here are the steps to reproduce the issue in the angular-editor-app application:

1. Modify polyfills.ts file by adding this line:

   import 'zone.js/dist/zone-patch-rxjs';

2. Run ng add @angular/material
3. Modify app.component.html file by mat-button directive to an a element like this:

   <p><a mat-button href="https://github.com/kolkov/angular-editor">Get it here</a></p>

4. Add the corresponding reference to the MatButtonModule to app.module.ts file.

[ewalke31]

I found that in the case of using angular-editor within a dialog when mat-typography is set on the body, it adds a click event on the body that calls a zone.js function with useCapture, ultimately blocking the click event in the font selection dropdown. Adding the line document.body.removeAllListeners('click'); in the ngOnInit for the dialog removes this event listener and fixes the issue.