iOS開發(fā)--內(nèi)嵌HTML編輯器 Objective-C 與 JavaScript 交互


通過接近N天的努力. 終于在今天.IOS下內(nèi)嵌HTML編輯器的Demo 基本實現(xiàn).學(xué)習(xí)過程中,參考了很多網(wǎng)上的資料.很感謝這些分享資源的牛人.有你們才能順利拿下這個比較特別的需求.


過程中找到兩個比較好的HTML編輯器是ZSSRichTextEditorCKEditor玻褪,下面我會簡單的介紹這兩款HTML編輯器;途中難點在于,如何與內(nèi)嵌HTML編輯器進行數(shù)據(jù)交互,接下來,進入正題:



ZSSRichTextEditor

ZSSRichTextEditor 是個漂亮的iOS富文本W(wǎng)YSIWYG所見即所得的編輯器炫彩,它包含了一個標(biāo)準(zhǔn)WYSIWYG編輯器所應(yīng)該擁有的所有工具榴徐,此外還提供源代碼語法高亮查看功能自阱。

ZSSRichTextEditor-1.gif


ZSSRichTextEditor--2.gif


CKEditor

CKEditor 是當(dāng)前最為知名的 HTML 編輯器,它具有所有主流 HTML 編輯器所應(yīng)當(dāng)具備的特點:所見即所得、簡單易用框仔、開源并支持各種主流的瀏覽器(IE惠遏、Oper砾跃、FireFox、Chrome节吮、Safari)抽高。最重要的是,CKEditor 經(jīng)過 10 年的不斷完善和更新透绩,其穩(wěn)定性和兼容性已經(jīng)不容質(zhì)疑翘骂。

CKEditor--1.png


主要過程:

小兵用的是ZSSRichTextEditor HTML編輯器

1)利用UIWebView 內(nèi)嵌HTML編輯器實現(xiàn)IOS下用戶可以進行富文本編輯壁熄;主要目的是保證服務(wù)端的內(nèi)容值不丟失.亦可在移動端對內(nèi)容進行一些簡單的修改.

ZSSRichTextEditor--3.png


2)加載本地的html文件

[self.webViewsetUserInteractionEnabled:YES];

//是否支持交互[self.webViewsetOpaque:NO];

//opaque是不透明的意思

[self.webViewsetScalesPageToFit:YES];

//自動縮放以適應(yīng)屏幕

NSString* path = [[NSBundlemainBundle] pathForResource:@"11"ofType:@"html"];

NSURL* url = [NSURLfileURLWithPath:path];

//? ? NSString *str = @"http://192.168.5.120:7293/6.html";

//? ? NSURL *url = [NSURL URLWithString:str];

NSURLRequest* request = [NSURLRequestrequestWithURL:url] ;

? [self.webViewloadRequest:request];

3)在UIWebView的代理方法-(void)webViewDidFinishLoad:(UIWebView *)webView中提取html頁面元素,跳轉(zhuǎn)到編輯頁面

-(void)webViewDidFinishLoad:(UIWebView*)_webView{

NSLog(@"123");

NSString*strings1 = [self.webViewstringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];

//? ? 這里獲得的strings為word文檔內(nèi)容的html格式碳竟。

//? ? NSLog(@"%@--askl",strings);

indestr_body = [NSStringstringWithFormat:@"%@",strings1];

4)提取HTML數(shù)據(jù)到編輯器

ZSSRichTextEditor--4.png


到此大功告成草丧;

擴展:js與webview 常用交互代碼

常用JS語句:::1、//禁用用戶選擇

常用JS語句:::1莹桅、//禁用用戶選擇[self.webViewstringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect=‘none‘;"];

2昌执、//禁用長按彈出框

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout=‘none‘;"];

3、//獲得UIWebView的URL地址

NSString*currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];

NSLog(@"currentURL==%@",currentURL);

4诈泼、//獲得UIWebView的標(biāo)題

NSString*theTitle=[webView stringByEvaluatingJavaScriptFromString:@"document.title"];

NSLog(@"theTitle==%@",theTitle);

5懂拾、//通過name(獲得/設(shè)置)頁面元素的value值

NSString*js_email_ByName = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName(‘email‘)[0].value=‘hello‘;"];

NSLog(@"js_email_ByName==%@",js_email_ByName);

NSString*js_password_ByName = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName(‘pwd‘)[0].value=‘hello‘;"];

NSLog(@"js_password_ByName==%@",js_password_ByName);

NSString*js_phone_ByName = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName(‘tel‘)[0].value=‘hello‘;"];

NSLog(@"js_phone_ByName==%@",js_phone_ByName);

6、//通過id(獲得/設(shè)置)頁面元素的value值

NSString*js_email_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_email‘).value=‘a(chǎn)sdfasdf‘;"];

NSLog(@"js_email_ById==%@",js_email_ById);

NSString*js_password_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_pwd‘).value=‘a(chǎn)sdfasdf‘;"];

NSLog(@"js_password_ById==%@",js_password_ById);

NSString*js_phone_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_phone‘).value=‘a(chǎn)sdfasdf‘;"];

NSLog(@"js_phone_ById==%@",js_phone_ById);

7铐达、//提交表單NSString*js_forms = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];

NSLog(@"js_forms==%@",js_forms);

8委粉、//獲得body與body之間的HTML

NSString*allHTML = [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];

NSLog(@"allHTML: %@", allHTML);

9、//使UIWebView的輸入框獲得焦點(但是無法,彈出iphone鍵盤)[webView stringByEvaluatingJavaScriptFromString:@"document.querySelector(‘#saySome‘).focus()"];

? ? [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x("saySome").scrollIntoView("true")"];

10娶桦、//改變webview尺寸時對應(yīng)改變web page尺寸(web page需要有對應(yīng)的處理)

[webview stringByEvaluatingJavaScriptFromString: [NSStringstringWithFormat:@"document.querySelector(‘meta[name=viewport]‘).setAttribute(‘content‘, ‘width=%d;‘, false);",(int)webview.frame.size.width]];

11贾节、//獲取webview顯示內(nèi)容的高度

CGFloat documentWidth = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(‘content‘).offsetWidth"] floatValue];

CGFloatdocumentHeight = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"content\").offsetHeight;"] floatValue];

12、//通過id獲取內(nèi)容

NSString*js =@"document.getElementById(‘lg‘).innerHTML";

NSString*pageSource = [webView stringByEvaluatingJavaScriptFromString:js];

NSLog(@"pagesource:%@", pageSource);

13衷畦、//改變字體大小

[self.webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName(‘body‘)[0].style.webkitTextSizeAdjust= ’150%’"];

14栗涂、//改變webView中圖片大小

[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement(‘script‘);""script.type = ‘text/javascript‘;""script.text = \"function ResizeImages() { ""var myimg,oldwidth;""var maxwidth = 300.0;"

// UIWebView中顯示的圖片寬度

"for(i=0;i maxwidth){"

"oldwidth = myimg.width;"

"myimg.width = maxwidth;"

"}"

"}""}\";

""document.getElementsByTagName(‘head‘)[0].appendChild(script);"];

15、//刪除所有鏈接

[webView stringByEvaluatingJavaScriptFromString:@"$(document).ready(function () {$(\"a\").removeAttr(\"href\");})"];

強大的富文本祈争,支持markdown語法

文/小兵快跑(簡書作者)

原文鏈接:http://www.reibang.com/p/4790c8a0317e

著作權(quán)歸作者所有斤程,轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),并標(biāo)注“簡書作者”菩混。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忿墅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子沮峡,更是在濱河造成了極大的恐慌疚脐,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件邢疙,死亡現(xiàn)場離奇詭異棍弄,居然都是意外死亡,警方通過查閱死者的電腦和手機疟游,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門呼畸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人颁虐,你說我怎么就攤上這事蛮原。” “怎么了另绩?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵儒陨,是天一觀的道長花嘶。 經(jīng)常有香客問我,道長框全,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任干签,我火速辦了婚禮津辩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘容劳。我一直安慰自己喘沿,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布竭贩。 她就那樣靜靜地躺著蚜印,像睡著了一般。 火紅的嫁衣襯著肌膚如雪窄赋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天忆绰,我揣著相機與錄音,去河邊找鬼错敢。 笑死,一個胖子當(dāng)著我的面吹牛缕粹,可吹牛的內(nèi)容都是我干的稚茅。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼亚享,長吁一口氣:“原來是場噩夢啊……” “哼绘面!你這毒婦竟也來了虹蒋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤飒货,失蹤者是張志新(化名)和其女友劉穎魄衅,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晃虫,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡扣墩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年扛吞,在試婚紗的時候發(fā)現(xiàn)自己被綠了荆责。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滥比。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡做院,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出键耕,到底是詐尸還是另有隱情,我是刑警寧澤村视,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布酒奶,位于F島的核電站蚁孔,受9級特大地震影響惋嚎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瘸彤,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望愕宋。 院中可真熱鬧结榄,春花似錦中贝、人聲如沸臼朗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽视哑。三九已至绣否,卻和暖如春挡毅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工取逾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留苹支,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓晴埂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親邑时。 傳聞我的和親對象是個殘疾皇子特姐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容