背景：

新项目需要一个富文本编辑器，需要支持latex公式，于是几番对比下来选了wangEditor,而且是最新的v5版本。由于我们用的vue脚手架，所以封装成富文本组件，通过传参控制显示不同的工具栏。初步完成时效果还是不错的，工具使用正常，包括同页面调用多个富文本组件。公式渲染也做了相应的组件方便渲染。

问题：

大概用了三周之后，领导在线上使用时发现了问题。从web或者word中复制文本再往输入框里粘贴时会出现各种奇怪的问题。比如粘贴内容语句顺序颠倒，缺失内容，重复粘贴，显示html标签等。这些情况是概率性出现的，不太容易复现。

在交待分析之前，还是要再补充两点信息，首先是前端工作由我和另外一个同事负责，代码同步用的git，打包项目并上传我俩都可以完成，但是如果是低版本上线不太可能，很容易从代码上看出端倪；另外就是公司没有专门的测试岗位，平时我们开发人员各顾各的马不停蹄地堆码，无暇做功能测试，测试工作大多由不懂技术的领导完成。这样说来，编辑器的问题可能一直都存在，只是没发现而已。

分析：

客户端环境原因：

问题是领导发现的，也是第一次收到这种反馈，我第一想到的是领导的运行环境问题。于是把领导复制的内容放在我本地运行并没有出现。不过，大家都知道文本复制到剪切板再粘贴到浏览器经过一系列的业务，必须完全还原步骤。跟不懂技术的领导又很难表达清楚。经过多次实验在我本地还是未能复现。不过同样的粘贴，在记事本和其它富文本编辑器中是ok的。所以我仍然认为封装组件的过程中加入了某些业务逻辑导致的。

业务代码原因：

我在封装的组件仔细寻找控制显示的业务，发现确实在粘贴回调时有过处理。

仔细想来领导以前反映过富文本编辑器的问题，表示粘贴时掺入了代码。我当时没太在意，简单百度了一下都认为是复制到粘贴过程中，编辑器的本身逻辑不够严谨造成的。为了快速解决问题，我在粘贴时做了拦截处理，去掉样式标签，只粘贴文本信息。

可是这就有些奇怪了，既然只粘贴文本，内容错乱还有可能，断然不会出现html标签，也不应该粘贴时出现样式。经过和同事对峙，真的是同事没有拉代码直接打包上传上线了。

可是这还是不能解决问题，既然线上的代码没有对粘贴内容做任何处理，为什么出现粘贴错乱的现象呢。

寻找珠丝马迹：

领导的电脑发现了问题，我的本地环境却复现不了，这很难搞。我总不能趴在领导上步一套开发环境。在领导步步紧逼下，我只好要来了粘贴时出现问题的word原件，在本地上一点点测试。

此时毫无头绪的我，没有明确的方向。只好把每段文字逐一测试，并且放在本地环境，正式环境，测试环境以及wangeditor的官网上粘贴测试。经过长时间的寻找，总算发现了踪迹。同样的复制内容，在我的本地环境是ok的，在记事本和wangeditor上是ok的，在正式环境和测试环境下就有问题。所以我把原因锁定在两个方向，一个是打包过程，一个是线上的运行环境。

经过我重新打包上传，发现测试环境和正式环境都是ok的。这样问题得到了解决，可是还是有一丝顾虑。如果说这个问题是打包导致并且是随机的，那么在以后的打包上传要怎么控制呢。这时候我眼前闪过一道白光，会不会是本地环境的原因导致打包出现了错误。因为我的本地环境ok，打包上传之后也是ok的。而原来的线上项目是同事打包上传的，会不会是同事的本地环境有问题，或者他的本地环境打包后才会出现问题，这个就需要反复验证了。

真相浮现

我把word原件传给同事，并且找到我用来测试的那段文字复制，在他本地开发环境下粘贴，果然出现了样式问题。这样就锁定了问题原因，他的本地环境污染了。然后删除node_module目录再重新安装，中间出现了各种报错。最终重新创建目录拉取代码再使用npm install才算搞定。经过两个小时的奋斗，终于在本地环境成功运行项目，且没有出现复制粘贴的问题。

反思

开发这回事并不是所见即所得，复制粘贴也好，打包运行也好，并不是把一件东西移动到另一处，而是经过复杂的处理过程，这个过程是在暗箱中操作，不能保证其运行的合理性。因此在遇到问题时要保持批判的眼光。当然，作为开发人员，首先批判的是自己。

最近在研究往wangeditor上加一个自定义的公式弹窗，类似katex这种插件，三四天了还没有完全搞定。