技巧-富文本焦点乱跳的问题

一、前言

上面做了邮件模板，保证了参数的不可编辑，在点击参数名称时，向富文本编辑器插入该参数。但是在编辑页面时，参数列表与富文本的内容已经回显，这时候编辑参数名称，光标会自动跳转到富文本编辑器。如图参数回显：

二、分析

1.从焦点入手

因为这是最直观的想法，但是试了一下，不管是取消 input 的默认行为，还是在 @input 里强制获取焦点，都没起作用。

2.关联性

在其它 el-input 里输入，光标正常；而编辑参数名称时，光标则跳到富文本编辑器，所以可初步下结论，两者有关联。

• 把富文本编辑器注释

把富文本编辑器注释后，发现编辑参数名称时，光标正常，不会乱跳。

• 取消数据回显

在这里，把富文本编辑器恢复，但是不给编辑器赋值，可以发现编辑参数名称时，光标也是正常的。

经过上面两步，可以进一步得出结论，光标异常与富文本回显的数据有关。编辑别的 el-input ，光标正常；编辑 参数名称，光标异常。 经过观察可以发现，当富文本编辑器里的内容和参数名称有关时，就会发生这种问题。那是不是参数名称和富文本的数据“绑在一起”了呢，就像不同的对象指向同一个地址一样，所谓的浅拷贝，修改一个对象，另一个对象也跟着改变。

          const {paramsInfo, htmlStr } = newVal;
          this.paramsInfo = paramsInfo; 
          this.htmlStr = htmlStr;

以上是参数的赋值，所以基于这个想法，把paramsInfo进行了深拷贝。

          this.paramsInfo = JSON.parse(JSON.stringify(paramsInfo));

经过这已操作，光标恢复正常。正常是正常了，但是原理还是不清楚，哈哈哈哈，懂的大佬指点一下。