因?yàn)槭謾C(jī)端要用到富文本編輯器，因?yàn)槭謾C(jī)上功能操作起來不是很方便，就選了 wangeditor

使用中遇到一點(diǎn)問題，就是 ios 系統(tǒng)的時(shí)候，點(diǎn)擊了編輯器，鍵盤也彈出了，但是編輯器無法輸入，無法編輯，也米有光標(biāo)，于是就在網(wǎng)上找有沒有相關(guān)的解決方案，試了幾個(gè)也沒有解決，最后試了一個(gè)，可以解決

image

contenteditable 查詢結(jié)果： https://www.runoob.com/tags/att-global-contenteditable.html

// 創(chuàng)建編輯區(qū)域的 dom
<div ref="edit" :contenteditable="contenteditable" class="text"></div>

// 為了方便看，把實(shí)例化代碼也貼上
this.editor = new E(this.$refs.toolbar, this.$refs.edit)

// contenteditable 屬性指定元素內(nèi)容是否可編輯。 屬性可以在網(wǎng)上查一查
加上之后dom 就會(huì)變成一個(gè)可編輯的元素，這樣在我們點(diǎn)擊的時(shí)候會(huì)顯示聚焦的邊框，在加上下面的代碼,這樣就可以成功點(diǎn)擊編輯了

div *{
    -webkit-user-select:text;
    outline: none;
}

image

還遇到一個(gè)問題，自動(dòng)聚焦的問題，手機(jī)端打開頁面，自動(dòng)彈出鍵盤 我們找到源代碼 找到這一行注釋掉,就可以了

this.selection.restoreSelection()

還有一個(gè)問題，wangeditor 在移動(dòng)端的時(shí)候，點(diǎn)擊編輯內(nèi)容的時(shí)候，光標(biāo)很不方便跑到你點(diǎn)擊的位置，我剛開始以為是我用的 3 的版本問題，然后我換成了 4 ，結(jié)果還是不行，他們官網(wǎng)的也是這個(gè)問題，推薦網(wǎng)頁端使用

參考地址：https://blog.csdn.net/weixin_43645543/article/details/106904693