-1

我正在尝试在我的角度应用程序 v10 中实现 WYSIWYG 编辑器。编辑器是这样的。现在，当我在平面组件（没有角材料）上实现它时，它工作正常。当我希望它在 mat-form-field 下使用 Angular Material 实现它时，问题就开始了。这是我的代码

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

请求标题输入框看起来很好，但是当涉及到作为所见即所得编辑器的请求描述字段时，它会在控制台中引发错误。错误是mat-form-field 必须包含 MatFormFieldControl。当我像下面这样插入普通输入框时。显示编辑器，但一旦我单击它就会失去焦点，焦点转到我添加的输入框。

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

我什至在 ckeditor 中添加了标签 matInput，如下所示，但它不起作用。

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

我用谷歌搜索了这个问题，并在这里找到了一个解决方案。但这并没有解决我的问题。

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

这就是我在标签中添加虚拟文本框时的显示方式。但是，当我单击编辑器向其中写入内容时，焦点就转到了虚拟文本框。图片

4

1 回答 1

0 
<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>

在 ts 文件上

onFocusElement() {
    this.messageClass = 'msg-ckeditor';
  }

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

在 CSS 方面

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

它与ckeditor v1.2.6一起为我工作。如果您找到更好的解决方法，请分享。

于 2020-08-13T10:51:56.123 回答