ios webview编辑文字_ios webview 编辑文字 - CSDN
  • iOS开发中,常常会遇到一些富文本编辑,如新闻,公告等,NSMutableAttributedString又有一定的局限性,所以我想到用html 模版去加载富文本页面,根据所需要的格式,去构建相应的html界面。一个简单的html模版如下...

     在iOS开发中,常常会遇到一些富文本编辑,如新闻,公告等,NSMutableAttributedString又有一定的局限性,所以我想到用html 模版去加载富文本页面,根据所需要的格式,去构建相应的html界面。一个简单的html模版如下:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <link rel="stylesheet"href="mystyle.css"type="text/css">

        <style type="text/css">

            .sourceAndTime{

                width:100%;

                font-size:12pt;

                line-height:40px;

                color:#1b6761;

                padding-right:8px;

                padding-left:8px;

            }

            #news_title{

                font-weight:bold;

                font-size:20pt!important;

                padding-right:8px;

                padding-left:8px;

                color:#57918b

            }

            #container{

                font-size:$contentfontsize;

                text-indent:1em;

                padding-right:8px

                padding-left:8px;

            }

        </style>

    </head>

    <body style="margin-left:10px;border: 0;">

    <div >

        <div id="news_title">$title</div>

        <div class='sourceAndTime'>

            <span>$time</span>

            <span style="padding-right:10px; float: right" >$source</span>

        </div>

    </div>

    <div style="width: 100%;margin: 0 auto;height: auto;" >

        <p style="text-align: center">

            <img  src=$imgSrcstyle="width: 50%;height:auto" />

        </p>

    </div>

    <div id="container">$content</div>

    <br/><br/><br/><br/>

    </body>

    </html>

    在模版中预留相应的唯一标志符,如$imgSrc等,然后在iOS端将这个html模版转换为一个字符串,然后再去替代这个字符串内的那些唯一标志符,具体iOS代码如下:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"news_detail" ofType:@"html"];

      _webString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
        
        _webString = [_webString stringByReplacingOccurrencesOfString:@"$title"withString:[_titleArray objectAtIndex:indexPath.row]];
        _webString = [_webString stringByReplacingOccurrencesOfString:@"$time" withString:[CNotificationVC TimeformatFromSeconds:[[ _timeArray objectAtIndex:indexPath.row] longLongValue]]];
        _webString = [_webString stringByReplacingOccurrencesOfString:@"$imgSrc"withString:[_imageArray objectAtIndex:indexPath.row]];
        _webString = [_webString stringByReplacingOccurrencesOfString:@"$content"withString:[_contentArray objectAtIndex:indexPath.row]];
        _webString = [_webString stringByReplacingOccurrencesOfString:@"$source" withString:[_adminArray objectAtIndex:indexPath.row]];

        UIWebView *webView = [[UIWebViewalloc]initWithFrame:CGRectMake(0,64, self.view.frame.size.width,self.view.frame.size.height)];

        webView.delegate =self;

        

        [webView setBackgroundColor:[UIColorclearColor]];

        [webView setOpaque:NO];

        [webView loadHTMLString:_webStrbaseURL:[NSURLfileURLWithPath:[[NSBundlemainBundle] pathForResource:@"news_detail"ofType:@"html"]]];    

        [self.viewaddSubview:webView];


    具体步骤就是如此,希望对大家有所帮助
    展开全文
  • webView本身没有属性去修改webView里内容的字体大小颜色等等.但是可以通过修改html代码进而实现. 先上代码.  self.webView = [[UIWebView alloc]initWithFrame:self.view.bounds];  NSString *...

    webView本身没有属性去修改webView里内容的字体大小颜色等等.但是可以通过修改html代码进而实现.

    先上代码.

        self.webView = [[UIWebView alloc]initWithFrame:self.view.bounds];

        NSString *htmlString = [NSString stringWithFormat:@"<html> \n"

                              "<head> \n"

                              "<style type=\"text/css\"> \n"

                              "body {font-size: %d; font-family: \"%@\"; color: %@;}\n"

                              "</style> \n"

                              "</head> \n"

                              "<body>%@</body> \n"

                              "</html>", 12, @"FZLTXHK", @"rgb(255, 79, 121)", @"html"];

       [self.webView loadHTMLString:htmlString baseURL:nil];


       这里用字符串拼接的形式体现一下如何修改字体样式.如果webView里的内容是需要和客户端的某些字体样式保持一样.直接在最开始html里改好就行.



    展开全文
  • ios WebView富文本

    2018-11-27 17:51:37
    前言 最近开发基于Web版的富文本,要实现PC与移动端互通,而且还有一些基础的操作,故而参考了许多开源框架和富文本JS框架。...这里我主要使用的基于webview富文本框架:ZSSRichTextEditor,再此基础上进行...

    前言

    最近开发基于Web版的富文本,要实现PC与移动端互通,而且还有一些基础的操作,故而参考了许多开源框架和富文本JS框架。
    实现富文本技术主要分为三类:ceretext、textkit、webview。这三类各有优劣,开发的难度、方式、用户体验也是有非常大的不同,这里不详细说明,具体的可以找度娘。
    这里我主要使用的基于webview富文本框架:ZSSRichTextEditor,再此基础上进行的改造和开发。

    技术实现

    在ZSSRichTextEditor框架中,有很多的文件,猛地一看有些不知所措。仔细阅读后才发现,主要的文件只有4个,其他的基本都是UI及一些交互。

    • ZSSRichTextEditor.js
    • zsseditor.html
    • JSBeautifier.js(其中style_html方法还没有用)
    • jQuery.js
      在 ZSSRichTextEditor.js 文件中,使用的技术就是Web API接口中Document的方法。

    当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

    技术实现并不复杂,对于一个不懂得js的移动开发人员来说,看几天也能明白个大概,也可以上手调试及修改。
    我的建议是不要完全照搬,还是根据自己的需求,进行适当的改动。

    开发中遇到的坑

    1、使用UIWebView 还是 WKWebview?

    众所周知,wkwebview的性能要比前者高很多,我在开发的时候,也是首选它,但是在个别的js方法中,会遇到兼容性的问题。
    例如:插入的视频不能显示,插入的图片不能使用file:///来显示,只能通过转base64才可以,及其他。
    这些问题会给你带来很多的困扰,不止是显示,还有后续的缓存操作,导出HTML,删除操作等。
    为了更简单的开发,我选择了UIWebView,虽然牺牲一些性能,但是操作体验也是ok的,没有明显的差距。

    2、webview删除工具条

    通过分类的方法可以删除工具条,UIWebView和WKWebView都可以,具体可以参考文章:
    ios - 删除WebView键盘上的工具条

    3、中文输入法样式不改变的问题

    字体加粗:document.execCommand('bold', false, null)
    具体的问题是这样的:对字体“加粗”后,再次调用“加粗”,使用英文和数字是没有任何问题的,字体变成不加粗的状态;使用中文输入法时,没有确认之前,字体都是正常的,当选中确认的文字后,字体就会跟前面的样式走,还是加粗。
    这个问题不止是 加粗,斜体,下划线也是如此,可能是webview的一个bug,要解决这个问题,就需要在输入的前方增加一个'&zwnj;'字符。
    '&zwnj;':放在电子文本的两个字符之间,抑制本来会发生的连字,也就是不使用之前的样式。
    具体的用法如下:

    if (document.queryCommandState('bold')) {
            document.execCommand('bold', false, null);
            document.execCommand('insertHTML', false, '&zwnj;');
        } else {
            document.execCommand('bold', false, null);
        }
    

    以上的方式虽然可以解决富文本中兼容性的bug,但是逻辑写起来特别麻烦,而且还存在其他的漏洞,今天无意间又发现了一种新的解决方案。

    if (document.queryCommandState('bold')) {
            document.execCommand('bold', false, 'div');
        } else {
            document.execCommand('bold', false, null);
        }
    

    经过了一段时间的测试和开发,以上两种方式必须同时使用,才能解决webview中设置字体的bug

    4、换行光标跟随问题

    在 ZSSRichTextEditor 文件中,有一个方法:calculateEditorHeightWithCaretPosition 是通过计算文字的高度与当前偏移量做计算,然后进行滚动,达到跟随输入光标位置的现象,getCaretYPosition方法中,
    我增加一个normalize() 方法,解决了一些兼容性的问题。
    normalize() 方法移除空的文本节点,并连接相邻的文本节点。

    zss_editor.getCaretYPosition = function() {
        var sel = window.getSelection();
        // Next line is comented to prevent deselecting selection. It looks like work but if there are any issues will appear then uconmment it as well as code above.
        //sel.collapseToStart();
        var range = sel.getRangeAt(0);
        var span = document.createElement('span');// something happening here preventing selection of elements
        range.collapse(false);
        range.insertNode(span);
        var topPosition = span.offsetTop;
        var spanParent = span.parentNode;
        spanParent.removeChild(span);
        spanParent.normalize();
        return topPosition;
    }
    

    5、输入中文时,光标跳动问题

    在最后一行,换行到新的一行进行输入的时候,如果是汉字输入,会产生联想输入条,在还没有确定输入内容的时候,UIWebView是不知道你需要的高度的,这个时候,由于触发了selectionchange,会导致输入时候,整个界面不断的抖动,因此在webview的最后面,强制插入一个空白的div(footer),使得输入始终是在已有的区域范围内的,然后在键盘弹起和收回的时候,设置编辑内容和footer的高度。

            <!-- ZSSRichTextEditor Editable Content -->
        <div id="zss_editor_content" class="zs_editor_content"     contenteditable="true" placeholder="">
            <!-- insertHTML -->
            </div>
    
        <!-- Footer -->
        <div id="zss_editor_footer"></div>
    

    6、键盘自动唤起

    在进入编辑器时,调用js方法设置焦点,达到唤起键盘的目的,但是无论怎么调用,都是不管用。后来才发现UIWebView的一个属性,设置以后就ok了,但是弹起的效果不太好看,不知道为什么。

    self.keyboardDisplayRequiresUserAction = NO;
    

    Available in iOS 6.0 and later.默认是YES
    如果设置为YES,用户必须明确的点击页面上的元素或者相关联的输入页面来显示键盘;如果设置为NO,一个元素的焦点事件导致输入视图的显示和自动关联这个元素。

    演示图:

    222.gif


    参考文章:
    document.execCommand API文档
    HTML6种空格的区别 &nbsp;&ensp;&emsp;&thinsp;&zwnj;&zwj;
    利用contenteditable属性与execCommand()方法制作简易富文本编辑器
    iOS的webview下的一个bug
    基于 UIWebView 的富文本编辑器实践



    本文转载自简书, 作者:囧rg, 链接:https://www.jianshu.com/p/c4d7824362cb

    展开全文
  • 本文主要讲述了如何在iOS应用中使用WebView加载HTML图片时实现自适应与文章自动换行功能,现在把...因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但

    本文主要讲述了如何在iOS应用中使用WebView加载HTML图片时实现自适应与文章自动换行功能,现在把相关的实现思路和代码整理出来分享给iOS程序员兄弟们,希望给他们的开发工作带来帮助。

    在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时。因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题。所以后台很多时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为重要了。

    在HTML代码中设置内容样式,一般使用css或者js,那么根据加载优先级以及加载效果,可以自行选择。

    • js在页面加载完之后加载,所以设置图片样式的时候,会先加载大图,然后突然变小;
    • css在引入时加载,直接加载缩小的图片(实际占用内存不会缩小);

    一、图片自适应

    1. 使用css进行图片的自适应

    在web前端,也就是HTML中,如果只设置图片的宽度,那么高度会根据图片原本尺寸进行缩放。

    如果后台返回的HTML代码中,不包含<head>标签,则可以直接在HTML字符串前加上一下面的代码(如果包含<head>,则在<head>标签内部添加)。代码含义是,不管用户以前设置的图片尺寸是多大,都缩放到宽度为320px大小。

    <head><style>img{width:320px !important;}</style></head>

    若需要根据图片原本大小,宽度小于320px的不缩放,大于320px的缩小到320px,那么在HTML字符串前加上一下代码:

    <head><style>img{max-width:320px !important;}</style></head>

    2. 使用js进行图片的自适应

    在webview的代理中,执行js代码。(下面这段代码是必须有<head>标签的)

    如果没有<head>标签,也很简单,只需要给返回的HTML字符串前面拼接一个<head></head>即可。

    - (void)webViewDidFinishLoad:(UIWebView *)webView
     {
        [webView stringByEvaluatingJavaScriptFromString:     @"var script = document.createElement('script');"
         "script.type = 'text/javascript';"
         "script.text = /"function ResizeImages() { "
             "var myimg,oldwidth,oldheight;"
             "var maxwidth=320;"// 图片宽度
             "for(i=0;i  maxwidth){"
                     "myimg.width = maxwidth;"
                 "}"
             "}"
         "}/";"
         "document.getElementsByTagName('head')[0].appendChild(script);"];
        [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
    }

    二、文章内容自动换行

    文章的自动换行也是通过css实现的,书写方式图片缩放类似。在没有<body>标签的情况下,在HTML代码前,直接拼接以下代码即可(若包含<body>,则将代码添加到body标签内部),意思是全部内容自动换行。

    <body width=320px style=/"word-wrap:break-word; font-family:Arial/">
    展开全文
  • iOS系统中,所谓“编辑菜单(Editing Menu)”和“上下文菜单(Contextual Menu)”是有区别的,但在桌面操作系统中,我们常说的“右键菜单”就已经囊括了“编辑菜单”和“上下文菜单”。iOS将两者细分开来,大概...
  • 本片博客只是记录一下 , 本人平时...webview字体大小的设置 private WebSettings settings; mJkjyMbzsDetailWebView = (WebView) findViewById(R.id.jkjy_mbzs_detail); //设置webView里字体大小 settings=mJkjyMbz...
  • NSString *html = @"怎么显示网络图片 "; [self.editorView loadHTMLString:html baseURL:nil]; 需要在plist 增加App Transport Security Setting - Allow Arbitrary Loads. 如图
  • 它能以较低的成本实现Android、iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时,WebView的性能体验却备受质疑,导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以...
  • IOS中中点击时可以弹出键盘但是无法输入。加一个样式-webkit-user-select:text就可以了。
  • 本文主要讲述了如何在iOS应用中使用WebView加载HTML图片时实现自适应与文章自动换行功能,现在把...因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但
  • 前言:最近帮公司的一名程序员搞一个项目的收尾工作,差一个富文本编辑器功能未实现,时间紧迫,调研了下网上的解决方法均较为繁琐. 不得已找了个别门来实现该问题,且看下文 需要实现的效果 需要实现的效果 ...
  • Android WebView与JavaScript实现的富文本编辑
  • iOS_WebView_Request_LAMP

    2014-06-23 09:20:02
    H:/1008/00_mac环境下PHP+MySQL+Apache.txtH:/1008/01_网络_登录_NSURLRequest_MainViewController.m// MainViewController.m // 网络基础-用户登录 // Created by apple on 13-10-8. /* 0,GET使用NSURLRequest...
  • ios上可以使用CKEditor和UIWebView实现富文本创建和编辑的功能. 首先下载CKEditor的包, 下载地址是http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.2.2/ckeditor_4.2.2_standard.zip 然后将CKEditor...
  • 混合开发中遇到的问题,textarea在安卓设备点击可以弹出键盘,正常输入,但是在ios中就不可以; 改的代码如下;       加了contenteditable="true"这个,貌似就可以了;
  • 在用WebView访问网页时,发现加载的页面里的文本框无法输入内容,而且也不会弹出软键盘,但是输入框里却有光标。在网上搜索说是因为WebView没有得到焦到,调用WebView的requestFocus()方法即可解决。     ...
  • 解决方法: $(document).on('blur', 'input', function () { setTimeout(function () { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; ...
  • 公司最近做一个项目,其中有一个模块是富文本编辑模块,之前没做个类似的功能模块,本来以为这个功能很常见应该会有已经造好的轮子,或许我只要找到轮子,研究下轮子,然后修改打磨轮子,这件事就八九不离十了。...
  • #本文主要是讲解部分原理,源码及其使用请移步Githubhttps://github.com/RexSuper/RichEditor APK:... Demo ...
  • 首先是要加一个给可编辑的div加一个样式-webkit-user-select:text,因为div里面可能还有子元素,所以需要这样写: div{ -webkit-user-select:text; height:auto; } div *{ -webkit-user-select:text } 有滚动条...
1 2 3 4 5 ... 20
收藏数 2,424
精华内容 969
关键字:

ios webview编辑文字