重磅出擊 實作IOS下内嵌HTML編輯器 Objective-C 與 JavaScript 通信攻關

通過接近N天的努力. 終于在今天.IOS下内嵌HTML編輯器的Demo 基本實作.

學習過程中,參考了很多網上的資料.很感謝這些分享資源的牛人.有你們.. 才能順利拿下這個比較特别的需求.

利用UIWebView 加載 KindEditor (也就是我說的内嵌). 實作IOS下使用者可以進行富文本編輯.

主要目的是保證服務端的内容值不丢失.亦可在移動端對内容進行一些簡單的修改.

途中難點在于,如何與 KindEditor 的進行資料互動.

這個開源項目對通信代碼進行了包裝. 使用起來非常簡單. 最關鍵基于SBJson 進行 Json 傳參. 結構清晰明了.

實作方面将KindEditor 直接加入程式包中,做為整個Demo的一部分. 當然咯,這避免不了安裝包會變大一些.(不知道App Store稽核方面允不允許. 有點擔憂.)

但通路本地網頁的速度非常值得信賴,也算是有得有失吧. 總之,根據實際情況:可以酌情修改是本地還是外部通路.

本次的Demo完成後,唯一遺憾的是4.X的IOS版本對JavaScript的支援還不夠完善,導緻KindEditor的顯示和執行. 都無法正常工作.

為此. 隻能利用UITextView 在載入HTML内容時,以進行一些簡單的内容過濾. 隻支援識别  空格,換行.兩項. 至于其他HTML标簽都會被掃描裁剪掉.

5.X以上的IOS版本.就可以完美支援.可見Safari對JavaScript的支援在一點一點的完善.(不知道說的對不對.)

我在Demo中加入了IOS版本識别. 以确定到底加載UITextView 還是 UIWebView.

本Demo的亮點是基于自定義控件的思想去實作的. 

我們後面在使用時.非常友善.隻需要執行個體化自定義控件,設定好控件的位置和大小. 實作僅一個必要的委托

customerHTMLEditor = [[UICustomHTMLEditoralloc]init];

customerHTMLEditor.delegate =self;

[self.viewaddSubview:customerHTMLEditor];

當然,肯定還有很多地方需要完善,非常希望能夠提出寶貴的建議和想法.以便做出更完善的自定義控件.

附上一張效果圖,展示下我的成果:

最後附上本次博文的 Demo. 以供下載下傳學習交流.

<a href="http://download.csdn.net/detail/ysy441088327/4218122" target="_blank">Demo</a>

Date:2012-04-11

今天為Demo 完善了兩個細節

1:修改了初始化方法,讓自定義控件可以加載來自伺服器的HTML編輯器. 隻需要将HTML編輯器檔案拷貝到伺服器指定位置,在初始化時提供正确的連結即可加載

2:在UIWebView加載HTML編輯器時,顯示Loading 成功加載後,隐藏Loading. 使用了第三方開源Loading庫(MBProgressHUB).

Date:2012-05-09

經過接近一個月的沉澱,Demo有了全新的改進

1:記憶體問題調優

2:正規表達式智能緩存圖檔标簽&lt;IMG&gt;

3:JS與OC的通信接口添加新的類型參數

全新的Demo:Demo

Data:2012-07-10

去除編輯器的背景色的方式

修改樣式檔案,路徑如下:

/Users/amarishuyi/Desktop/Work/FEOA 1.0/FEOA Other/KindEditor/themes/default/default.css

搜尋FFF.  将找到的第一行删除即可