如何在 Angular 材料中使用 ckeditor5

Question

I am trying to implement WYSIWYG editor in my angular application v10. The editor is this . Now when I am implementing it on plane component(without angular material) it works fine. The problem starts when I want it to implement it using Angular Material under mat-form-field. Here is my code

<form class="example-form">
<mat-form-field class="example-full-width" appearance="outline">
  <mat-label>Request Title*</mat-label>
  <input matInput  value="">
</mat-form-field>
<mat-form-field class="mat-editor" appearance="outline">
  <mat-label>Request Description / Requirements*</mat-label>
 <ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor> 
 </mat-form-field> 

The Request Title input box appears fine but when it comes to Request Description field which is the WYSIWYG editor, it throws error in the console. The error is mat-form-field must contain a MatFormFieldControl. When I just insert normal input box like below. The editor is displayed but it looses focus as soon as I click on it and focus goes to the input box which i added.

<mat-form-field class="mat-editor" appearance="outline">
  <mat-label>Request Description / Requirements*</mat-label>
 <input matInput  value=""> 
  <ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor> 
 </mat-form-field> 

I even added the tag matInput in ckeditor like below, but it didn't work.

  <ckeditor matInput   [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor> 

I googled the problem and found one solution here . But it didn't solve my problem.

 <ckeditor matCkeditor   [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor> 

This is how it is displayed when I add dummy textbox within tag. But focus went to the dummy text box as soon as I click the editor to write something into it. Image

Answer 1

<mat-form-field appearance="outline" floatLabel="always" [hideRequiredMarker]="'true'">
  <mat-label>Message (please edit as needed)</mat-label>
  <textarea matInput #messageInput placeholder="Enter message" [(ngModel)]="model.message" required
    style="display: none;"></textarea>
  <ckeditor (focus)="onFocusElement()" (focusout)="onFocusoutElement()"
    [(ngModel)]="model.message" id="myckeditor1" #myckeditor1="ngModel" name="myckeditor1" [config]="CkeConfig"
    debounce="500">
  </ckeditor>
</mat-form-field>

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;
}

and it worked for me with ckeditor v1.2.6. If you find better way to solve than please share.