Javascript 在ngx编辑器中，单击按钮时如何在光标位置插入html块

我在Angular 7中使用ngx编辑器。我需要在单击参数列表中的参数时在光标位置插入html。附件是我当前视图的图像。现在单击参数，它将以这种方式追加参数，如图所示

我希望每个选择的参数都是单独的标记，应该在单个退格中删除。你也应该能够写纯文本

我现在就是这样做的

   <div class="bm-link-btn pull-right mt-10" [tooltip]="tooltipTemplate" placement="bottom" > 
    Parameters </div>

   <ng-template #tooltipTemplate>
       <div class="u-display-flex text-left">
           <div class="p20" *ngFor="let item of paramsList$|async as params">
              {{item?.category}}
              <div class="bm-link-btn" *ngFor="let param of item.parameters">
                 <span (click)="onClickOfParams(param.value)">{{param.displayName}} 
                 </span>
              </div>
           </div>
        </div>
    </ng-template>




 onClickOfParams(value) {
     document.getElementById('ngx-editor-textarea').focus();
     let html = `
          <div class="parameter-item"><div class="badge-plain-new">`+ value + `</div></div>`;

    if (!document.execCommand("InsertInputText", false, '')) {
      document.execCommand("InsertHTML", false, html);
    }
 }

参数
{{item？.category}
{{param.displayName}
onClickof参数（值）{
document.getElementById（'ngx-editor-textarea'）.focus（）；
让html=`
`+值+``；
如果（！document.execCommand（“InsertInputText”，false，”））{
document.execCommand（“InsertHTML”，false，html）；
}
}

这就是我想要实现的目标。有谁能告诉我更好的方法吗

HTML代码：-->

电子邮件正文
{{addNotificationTemplateFormErrors.EmailBody}}

组件：-->

@ViewChild（'EmailBody'）EmailBody:ElementRef；
this.cursorPositionedField=this.EmailBody；
如果（this.addNotificationTemplateForm.value.EmailBody！=null
&&this.addNotificationTemplateForm.value.EmailBody！==未定义
&&this.addNotificationTemplateForm.value.EmailBody！=''）{
const currentValue=this.cursorPositionedField。
_commandExecutor.savedSelection。
commonAncestorContainer.textContent；
const startOffset=this.cursorPositionedField。
_commandExecutor.savedSelection.startOffset；
const endOffset=this.cursorPositionedField。
_commandExecutor.savedSelection.endOffset；
newValue=[currentValue.slice（0，startOffset），insertField，
currentValue.slice（endOffset）].join（“”）；
} 
否则{
newValue=insertField；
}
如果（newValue.lengthHTML代码：-->


电子邮件正文
{{addNotificationTemplateFormErrors.EmailBody}}

组件：-->

@ViewChild（'EmailBody'）EmailBody:ElementRef；
this.cursorPositionedField=this.EmailBody；
如果（this.addNotificationTemplateForm.value.EmailBody！=null
&&this.addNotificationTemplateForm.value.EmailBody！==未定义
&&this.addNotificationTemplateForm.value.EmailBody！=''）{
const currentValue=this.cursorPositionedField。
_commandExecutor.savedSelection。
commonAncestorContainer.textContent；
const startOffset=this.cursorPositionedField。
_commandExecutor.savedSelection.startOffset；
const endOffset=this.cursorPositionedField。
_commandExecutor.savedSelection.endOffset；
newValue=[currentValue.slice（0，startOffset），insertField，
currentValue.slice（endOffset）].join（“”）；
} 
否则{
newValue=insertField；
}
如果（newValue.length）ngx编辑器中断。请检查我们的fork:ngx编辑器是否中断。检查我们的fork:
@ViewChild('EmailBody') EmailBody: ElementRef;

this.cursorPositionedField = this.EmailBody;
if (this.addNotificationTemplateForm.value.EmailBody != null 
  && this.addNotificationTemplateForm.value.EmailBody !== undefined
  && this.addNotificationTemplateForm.value.EmailBody !== '') {
    const currentValue = this.cursorPositionedField.
       _commandExecutor.savedSelection.
       commonAncestorContainer.textContent;
    const startOffset = this.cursorPositionedField.
       _commandExecutor.savedSelection.startOffset;
    const endOffset = this.cursorPositionedField.
       _commandExecutor.savedSelection.endOffset;
    newValue = [currentValue.slice(0, startOffset), insertField, 
       currentValue.slice(endOffset)].join('');
} 
else {
  newValue = insertField;
}
if (newValue.length <= ValidationConstant.notificationTemplate.
  add.emailBody.maxLength) {                      
  this.addNotificationTemplateForm.controls['EmailBody'].
    markAsDirty({ onlySelf: true });                        

  this.addNotificationTemplateForm.controls['EmailBody'].patchValue(newValue);
}