Question

尝试向PrimeNG的标准富文本编辑器添加一些功能（实际上只是Quill。）目标是保持运行的字符数并强制http协议到任何没有http / https前言的嵌入式链接上。所以，控制：

<p-editor  id=editor formControlName="summaryControl" class="spacer" (onTextChange)="onTextChanged($event)" placeholder="enter personal summary" [style]="{'height':'150px'}" >

和方法：

onTextChanged(changeEvent) {
    if (changeEvent.source === 'api') {
      return;
    }
    const textValue = changeEvent.textValue;
    const htmlValue = changeEvent.htmlValue;

    const htmlLinksFixed = htmlValue.replace(/href="(?:(http|ftp|https)\:\/\/)?([^"]*)"/g, 'href="http://$2"');

    let textLength = textValue.length;
    if (textValue.charCodeAt(textValue.length - 1) === 10) {
      textLength = textLength - 1;
    }

    let countdown: any = this.maxLength - textLength;
    if (countdown > this.maxLength) {countdown = this.maxLength; }
    if (countdown > this.maxLength) {countdown = this.maxLength; }
    this.summaryFormGroup.patchValue({
      sumCountControl: countdown,
      summaryControl: htmlLinksFixed
    });
  }

这取决于我最初的目标但是有一个不幸的副作用。当SummaryControl的值在末尾打补丁时，文本区域失去焦点。因此，实际上，您键入一个字符，失去焦点，然后必须单击返回编辑器以键入您的下一个字符。

我在代码中的其他地方有一个单独的实现，它使用ngModel而不是反应形式，只是设置基础值。这没有这个焦点问题，所以它似乎特定于patchValue（）。

关于如何避免这种情况的任何想法？

反应形式：p-editor的修补值导致失去焦点

0 个答案: