公司業務需要,趁此研究
說實話,前端做編輯器不香嗎?,客戶端展示一下就完了
既然開始了,就停不下來,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開發中的問題