基于WebView的富文本编辑器开发

前述：富文本编辑器的实现效果，简单来说我们常用的就是图文混排、文字设置属性（加粗、下划线等等）。一般在笔记类、文档类产品中使用广泛，如、有道云笔记等产品而文本的编辑，首先我们想到的是UITextView这个控件，它是OC中为我们开放的文本编辑组件，同样支持插图、设置文字属性等。平时我们用它来呈现内容或者编辑。
一》方案的选择理由
在实际开发中，由于Object C的富文本NSMutableAttributedString的创建过程并不灵活，且需要通过属性字典以及NSMakeRange确定文字的属性范围。所以，在富文本的开发中，我个人并不推荐基于原生TextView开发富文本编辑器。而H5是使用标签来对内容进行编辑和保存的，相比较于OC原生的NSMutableAttributedString设置属性如此生硬，H5技术的标签化标记实则是一项现成的实现富文本的好东西。因此，我推荐的方案就是：基于H5页面进行富文本编辑器的开发
二》框架描述
总的来说，基于H5开发的文本编辑器的核心就是：JS与本地OC的相互调用，总体思路如下图：

模型结构

》H5端：
负责开发和封装好富文本编辑器所需要的各种方法，如字体字号、加粗、下划线、排版等功能，并将方法封装好，以备本地客户端调用JS代码。
》客户端：
负责开发H5页面需要和本地进行交互的一系列功能，比如提示框、调用系统相册、本地沙盒数据等等。

我初期做的简单的demo里，最终呈现的样式如下：

屏幕快照 2017-07-07 下午10.56.54.png

依照上边的设计，我会点击这些本地的按钮，通过本地调用H5端开放好的JS方法，来达到控制H5端富文本编辑器的各种文字样式和排版布局。当然了，设置文字属性的ToolBar，可以原生写一个出来，其实也可以直接在H5端做好。

三》H5代码的加载方式与两个调用函数
其实就是加载一套HTML到webView端。你可以通过获取一个URL，直接加载网页链接进入。同样的，你也可以将H5的全套代码存入本地（HTML连同它的JS代码）。

    //获取本地HTML文件的路径
    NSString * path = [[NSBundle mainBundle] bundlePath];
    NSURL * baseURL = [NSURL fileURLWithPath:path];
    NSString * htmlFile = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString * htmlStr  = [NSString stringWithContentsOfFile:htmlFile encoding:(NSUTF8StringEncoding) error:nil];
    //在webView加载出来本地HTML的路径地址，如果是加载线上网页，则直接加载对应的URL就好了
    webV = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,screenWidth,screenHeight - 67)];
    webV.backgroundColor = [UIColor whiteColor];
    webV.delegate = self;
    [webV loadHTMLString:htmlStr baseURL:baseURL];
    [self.view addSubview:webV];

本地调用JS的方法，就是通过一下函数调用的

[webview  stringByEvaluatingJavaScriptFromString:@"调用方法名"];

本地拦截触发webview方法的代理函数

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

四》关于插入图片
H5所支持的插入图片是将一个图片的链接或者本地客户端图片的保存路径插入，从而实现图文混排的效果。这里插入图片有两种了：其一，获取图片的本地路径插入图片，在最终提交的时候上传所有图片文件；其二，选择一张图片，上传一张图片，并直接将Image的URL插入到H5中并显示。综合比较来说，第二种方案最为便利，因此，我们选择第二种方案。结构图如下：

图片插入.png

中间的加载过程中，可以选择使用菊花加载等方式来实现等待动画。最终结果的demo如下：

屏幕快照 2017-07-08 上午10.00.11.png

两点注意：
1>H5端需要做图片的100%的按当前屏幕宽度为准的等比例尺寸适应。以达到图片的宽度不会超过当前屏幕的宽度
2>客户端插入图片进入H5的前提条件是，H5端的编辑器不能失去焦点，否则代码是不能插入的。但是，在客户端进入图片库的时候（即UIImagePickerController），编辑器都会失去焦点。这在接下来会导致图片URL无法插入编辑器。因此，需要H5端开放一个getFocus()的方法函数，在图片完成上传，即将插入编辑器前，首先调用一次getFocus()获取焦点，然后再调用插入图片函数

五》编辑内容的保存
通过本地调用JS方法，可以获取到H5编辑页面的全部内容。该内容会以String的形式返回。只需要将该String发送至Service端保存就可以了。调用的方法如下：

//获取web页面内容
//其中“H5页面的标记值”，指的是当前这个web页面的标记。需要通过标记获取指定的web的内容
NSString *html = [webV stringByEvaluatingJavaScriptFromString:@"document.getElementById('H5页面的标记值').innerHTML"];

基本流程如下图：

屏幕快照 2017-07-08 上午10.25.07.png

至此，基于H5的富文本编辑器的基本功能就算实现了。

六》补充优化说明的几个点
A.编辑框的可编辑区域优化
在键盘弹出和收回时，我们的H5幅文本可编辑区域应该是不同的。如下图：

屏幕快照 2017-07-08 上午10.35.01.png

B.焦点定位
始终要保持焦点在可以看见的范围内，而不能被键盘遮盖住