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

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

ZSSRichTextEditor

ZSSRichTextEditor 是個漂亮的iOS富文本W(wǎng)YSIWYG所見即所得的編輯器，它包含了一個標(biāo)準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.itdecent.cn/p/4790c8a0317e

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