Vue+wangEditor 富文本编辑器做群组@功能，@弹窗出现后回车名称可以插入选区点击不行？

• Z时代
• 2024-02-14
• 分类：IT

//@弹窗回调
onAtPopupCallback(val) {
  this.atPopup = false;
  const atText = val
  const justHaveAt =
    this.editorIns
      .getText()
      .substring(this.editorIns.getText().lastIndexOf("@")) === "@";
  if (!justHaveAt) {
    // this.editorIns.insertText(`${atText} `);
    // this.atPopup = false;
  } else {
    console.log(atText);
    this.editorIns.insertText(`${atText} `);
  }
}

弹窗组件

//键盘触发
handleOnkeyPress(e) {
  if (e.keyCode === 13 || e.charCode === 13) {
    //回车
    e.stopPropagation();
    e.preventDefault();
    if (this.atPopup) {
      this.callback(this.name);
    }
  }
},
//点击
callback(name) {
  this.$emit("onAtPopupCallback", name);
},

出现弹窗后点击姓名不会插入到@后面，回车可以，如何解决？
this.editorIns.insertText(${atText} )插入都是调用的一个方法

回答：

this.editorIns.insertText(`${atText}`)替换为
this.editorIns.dangerouslyInsertHtml(`<span>${atText} </span>`)

以上是 Vue+wangEditor 富文本编辑器做群组@功能，@弹窗出现后回车名称可以插入选区点击不行？ 的全部内容， 来源链接： utcz.com/p/937075.html