富文本编辑器的空格（富文本编辑器粘贴错误寻踪记）

新项目需要一个富文本编辑器，需要支持latex公式，于是几番对比下来选了wangEditor,而且是最新的v5版本由于我们用的vue脚手架，所以封装成富文本组件，通过传参控制显示不同的工具栏初步完成时效果还是不错的，工具使用正常，包括同页面调用多个富文本组件公式渲染也做了相应的组件方便渲染，现在小编就来说说关于富文本编辑器的空格?下面内容希望能帮助到你，我们来一起看看吧!

富文本编辑器的空格

新项目需要一个富文本编辑器，需要支持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这种插件，三四天了还没有完全搞定。