iOS开发--内嵌HTML编辑器 Objective-C 与 JavaScript 交互

通过接近N天的努力. 终于在今天.IOS下内嵌HTML编辑器的Demo 基本实现.学习过程中,参考了很多网上的资料.很感谢这些分享资源的牛人.有你们才能顺利拿下这个比较特别的需求.
过程中找到两个比较好的HTML编辑器是ZSSRichTextEditorCKEditor,下面我会简单的介绍这两款HTML编辑器;途中难点在于,如何与内嵌HTML编辑器进行数据交互,接下来,进入正题:

ZSSRichTextEditor

ZSSRichTextEditor 是个漂亮的iOS富文本WYSIWYG所见即所得的编辑器,它包含了一个标准WYSIWYG编辑器所应该拥有的所有工具,此外还提供源代码语法高亮查看功能。

ZSSRichTextEditor-1.gif
ZSSRichTextEditor--2.gif

CKEditor

CKEditor 是当前最为知名的 HTML 编辑器,它具有所有主流 HTML 编辑器所应当具备的特点:所见即所得、简单易用、开源并支持各种主流的浏览器(IE、Oper、FireFox、Chrome、Safari)。最重要的是,CKEditor 经过 10 年的不断完善和更新,其稳定性和兼容性已经不容质疑。

CKEditor--1.png

主要过程:

小兵用的是ZSSRichTextEditor HTML编辑器

1)利用UIWebView 内嵌HTML编辑器实现IOS下用户可以进行富文本编辑;主要目的是保证服务端的内容值不丢失.亦可在移动端对内容进行一些简单的修改.

ZSSRichTextEditor--3.png

2)加载本地的html文件


    [self.webView setUserInteractionEnabled:YES];//是否支持交互
    
    [self.webView setOpaque:NO];//opaque是不透明的意思
    [self.webView setScalesPageToFit:YES];//自动缩放以适应屏幕

   NSString* path = [[NSBundle mainBundle] pathForResource:@"11" ofType:@"html"];
    NSURL* url = [NSURL fileURLWithPath:path];
    
    //    NSString *str = @"http://192.168.5.120:7293/6.html";
    //    NSURL *url = [NSURL URLWithString:str];
    
    NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
    [self.webView loadRequest:request];
    

3)在UIWebView的代理方法-(void)webViewDidFinishLoad:(UIWebView *)webView中提取html页面元素,跳转到编辑页面

-(void)webViewDidFinishLoad:(UIWebView *)_webView{
    
    NSLog(@"123");
    
    NSString *strings1 = [self.webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
   
    //    这里获得的strings为word文档内容的html格式。
//    NSLog(@"%@--askl",strings);
    
    indestr_body = [NSString stringWithFormat:@"<body>%@</body>",strings1];

4)提取HTML数据到编辑器

ZSSRichTextEditor--4.png

到此大功告成;

扩展:js与webview 常用交互代码


常用JS语句:::

1、 //禁用用户选择

    [self.webView stringByEvaluatingJavaScriptFromString:@"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的标题

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

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

 

5、//通过name(获得/设置)页面元素的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(获得/设置)页面元素的value值

NSString *js_email_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_email‘).value=‘asdfasdf‘;"];

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

NSString *js_password_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_pwd‘).value=‘asdfasdf‘;"];

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

NSString *js_phone_ById = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementByIdx_x_x(‘_iphone_phone‘).value=‘asdfasdf‘;"];

     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尺寸时对应改变web page尺寸(web page需要有对应的处理)

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

   

11、//获取webview显示内容的高度

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

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

 

12、//通过id获取内容

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

    NSString *pageSource = [webView stringByEvaluatingJavaScriptFromString:js];

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

 

13、//改变字体大小

  [self.webView stringByEvaluatingJavaScriptFromString:@"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 <document.images.length;i++){"

     "myimg = document.images[i];"

     "if(myimg.width > maxwidth){"

     "oldwidth = myimg.width;"

     "myimg.width = maxwidth;"

     "}"

     "}"

     "}\";"

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

 

15、//删除所有链接

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

 


强大的富文本,支持markdown语法

Demo


随手点个喜欢吧~

关注我

QQ--iOS 交流群:107548668

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容