Utilizing CKEditor5 with Angular Material

My code displays the Request Title input box without any issues, but encounters an error in the console when attempting to implement a WYSIWYG editor for the Request Description field. I am currently working on integrating this feature into my Angular v10 application.

Question:

I am attempting to incorporate
WYSIWYG editor
into my Angular v10 application. The editor I’m using is functional. However, when I try to implement it using Angular Material in
mat-form-field
, I encounter issues. The following is my code.

Request Title* Request Description / Requirements*

The title of Request
input box
seems acceptable, but the Request Description field, which employs a WYSIWYG editor, generates an error in the console. Specifically, the error message reads “Mat-form-field must contain a MatFormFieldControl.” Although inserting a regular input box permits the editor to display, it loses focus as soon as I click on it, redirecting the focus to the added input box.


  Request Description / Requirements*
  
   
  

Despite my addition of the matInput tag to ckeditor, it failed to function as intended.

   

After researching online, I came across a suggested solution for the issue. However, it did not resolve the problem I was facing.

  

When I insert a dummy textbox inside the

tag, it appears like this. However, clicking on the editor immediately shifts the focus to the dummy textbox, as shown in the image.


Solution:


  Message (please edit as needed)
  
  
  

on ts file

onFocusElement() {
    this.messageClass = 'msg-ckeditor';
  }
onFocusoutElement() {
    if (Utility.isNullorUndefined(this.model.message) || this.model.message.trim() === '') {
      this.messageClass = 'msg-ckeditor-error';
    } else {
      this.messageClass = '';
    }
  }

and on css side

.msg-ckeditor .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #01a79d;
}
.msg-ckeditor-error .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #f44336;
}

I was able to successfully use it with ckeditor v1.2.6. If you have an alternative solution, kindly share it.

Frequently Asked Questions