富文本編輯器的空格?新項目需要一個富文本編輯器，需要支持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這種插件，三四天了還沒有完全搞定。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!