ios 編輯器1-基於WKWebview的編輯器技術方案 方案選型 技術思路 組件化 總結

公司業務需要,趁此研究

說實話,前端做編輯器不香嗎?,客戶端展示一下就完了

既然開始了,就停不下來,android,ios都搞完了,寫點總結

方案選型

也沒啥選型的,git搜一搜,看看效果,star,維護程度,對比一下就知道了。如果issues裏沒啥硬性問題,就它了

技術方案主要有兩類:

一是純原生開發,這種對原生友好,但是不好用啊,並且還要轉html給web用。

二是web方案,html,js,css。android,ios,web互通。但是作爲原生開發有點不太好整,並且原生上調試js之類的也不太方便

這都是屁話了,真好用哪個方案都行,git搜一搜:

android:

https://github.com/RexSuper/RichEditor

參考了wasabeef/richeditor-android。支撐了更多的功能類型,插入文件之類的。這比較適合需求出發點,心生好感

ios:

https://github.com/Vergil-wj/RichTextEditor

基於nnhubbard/ZSSRichTextEditor開發的


demo運行一下,感受一下就知道了,另外,android,ios這倆庫的實現方案,思路是一樣的,連js寫法都差不多。所以,開發中,可以相互參考,技術統一

技術思路

就是想提一句,android,ios都是這樣的。技術實現不是重點,敘述一下上圖:

1):原生端有個webview控件作爲編輯器視圖,加載web資源,用於編輯展示內容
2)編輯階段,原生端調用js提供的function,執行js功能,編輯html內容
3)js掉native,用於內容回調,樣式回顯之類的。

整個編輯器也就這麼多,拉個前端的同志,就能開始寫了

組件化

文本,圖,video,audio,file

android,ios,web 統一化:

編輯器編輯,發佈:本地文件處理,有兩種思路,一是編輯中上傳,二是最後統一上傳。上傳文件後,url替換文案中的path,最後發佈整個文案。這裏文案需要考慮,只發布html還是整個js,css都內聯發佈。因爲有jQuery.js,內容還挺多。。

編輯器-加載-編輯-發佈。整個循環過程成立

總結

本文技術不是重點,技術方案,技術實現參考一下開源庫。。整體開發中android沒啥問題,ios相對問題較多,後續會寫ios開發中的問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章