背景

前置條件：編輯器wangEditor vue項目
在pc端進行了富文本操作， 將word內(nèi)容復制到編輯器中， 進行發(fā)布， pc端正常， 在手機端展示的時候 顯示不全

分析

根據(jù)h5端編輯器內(nèi)容的數(shù)據(jù)展示， 看到有一些樣式造成的， <table style="margin-left: -51.3pt; border: none; border-collapse: collapse;">
由于偏移了51.3pt， 造成了不可見；但是這些內(nèi)容是富文本內(nèi)容， 是用戶側(cè)造成的， 用戶測數(shù)據(jù)千變?nèi)f化， 不可能一樣對應(yīng)去修改，該如何解決呢

想到一個問題： 為什么pc端能正常顯示呢， 如果存在偏移，那么pc端顯示也會偏移啊， 馬上去pc端查看樣式驗證， 結(jié)果發(fā)現(xiàn)它默認的樣式確實和上面一樣， 但是css樣式規(guī)則表示 margin-left: -51.3pt 未生效，生效的是另外一個樣式

這個index.vue是什么文件呢， 于是點開看看， 發(fā)現(xiàn)這個文件已經(jīng)對編輯器的一些樣式做了優(yōu)化， 我完全可以把這些樣式放到手機端去

解決

• 構(gòu)造同樣的層級關(guān)系

<div class='editor' ><div class="w-e-text-container"><div class="w-e-text" >

• 將樣式拷貝過來，驗證
• 由于富文本是從后臺讀取的， 使用了domPropsInnerHTML， 使用了它之后， 下面樣式editor .w-e-text > table 不生效; 解決方式是前面加一個deep /deep/ .editor .w-e-text>table ，驗證生效， 完美解決