iOS富文本编辑的实现

最近负责公司产品笔记模块的开发，设计到富文本编辑的功能。刚开始做的时候并没有考虑到和web端对接，直接用UITextView来实现富文本的编辑和展示，TextKit非常强大。等到在网页端展示和编辑的时候，就会出现一些格式的错乱。后来分析原因为web端的富文本编辑用的是前端人员自己写的一套css样式。所以，为了统一格式，iOS端也应按照web端使用的css基于网页进行渲染。于是半个月的coding白费....换成UIWebView重新写。

这里稍微提一下为什么没有用WKWebView。做之前偷偷去有道云笔记的用户群里问了，他们技术回答目前使用的是UIWebView，目前也还没考虑更换为WKWebView。可能是因为WKWebView坑比较大？不知道.....

首先需要从前端人员那里要到他们用的css文件，CSS一般是3种用法：外部样式表，内部样式表和行内样式表，这里主要讲解外部样式表：在head部分加入,引入外部的CSS文件。这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。本人项目里使用的就是外链的css。

将前端写好的富文本编辑器加入到项目中，初始化UIWebView的时候加载本地的html文件即可。

   NSBundle *bundle = [NSBundle mainBundle];

   NSURL *indexFileURL = [bundle URLForResource:@"editor" withExtension:@"html"];

   [webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];    

这里注意：此html文件里应该包含html文件 js方法文件 css样式文件

如果你使用的是UIWebView 则用stringByEvaluatingJavaScriptFromString:来进行js的交互

如果你使用的是WKWebView 则用evaluateJavaScript：来进行交互。

这里对evaluateJavaScript的方法多说一句，如果你使用Swift编程，这个方法的block值会自动给你写上返回值对象，如果你使用OC，则需要手动添加。如下：

     [webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id _Nullable height, NSError * _Nullable error) {

}];

这里的height就需要你手动写上。

好，接下来介绍具体的使用：

1.各种样式的渲染，这个你需要和你前端沟通，他会告诉你本地的html文件里有哪些js方法是用来触发富文本格式的。你调用这些方法即可。代码如下（这里的RE是js对象，也就是在你本地html里的js文件中的全局对象，通过它来调用那些js代码）：

 #pragma RichTextEditorViewDelegate Methods

 - (void)richTextEditorToolbarDidSelectBold{

[self.webView  stringByEvaluatingJavaScriptFromString:@"RE.setBold();"];

}

  - (void)richTextEditorToolbarDidSelectItalic{

 [self.webView stringByEvaluatingJavaScriptFromString:@"RE.setItalic();"];

}

   - (void)richTextEditorToolbarDidSelectUnderline{

 [self.webView stringByEvaluatingJavaScriptFromString:@"RE.setUnderline();"];

}

   - (void)richTextEditorToolbarDidSelectStrikeThrough{

 [self.webView    stringByEvaluatingJavaScriptFromString:@"RE.setStrikeThrough();"];

}

  - (void)richTextEditorToolbarDidSelectBulletPoint{

 [self.webView stringByEvaluatingJavaScriptFromString:@"RE.setInsertUnorderedList();"];

}  

 - (void)richTextEditorToolbarDidSelectBulletNumber{

[self.webView stringByEvaluatingJavaScriptFromString:@"RE.setInsertOrderedList();"];

}

  - (void)richTextEditorToolbarDidSelectTextAlignment:(NSTextAlignment)textAlignment{

 if (textAlignment == NSTextAlignmentLeft) {

 [self.webView stringByEvaluatingJavaScriptFromString:@"RE.setJustifyLeft();"];

}

 if (textAlignment == NSTextAlignmentRight) {

 [self.webView stringByEvaluatingJavaScriptFromString:@"RE.setJustifyRight();"];

}

if (textAlignment == NSTextAlignmentCenter) {

[self.webVie stringByEvaluatingJavaScriptFromString:@"RE.setJustifyCenter();"];

}

2.编辑页面的大小：一般的笔记类软件编辑的时候都会在UIWebView外面套一层UIScrollView，依据UIWebView的实时高度去设置UIScrollView的contentSize。那如何获取UIWebView的实时高度呢，有好几种方法，这里只说一下我自己的方法，其他请自行google。给UIWebView添加监听。代码如下：

# pragma mark - UIWebViewDelegate

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

self.webView.height = self.webView.scrollView.contentSize.height;    

if (!self.isObserving) {  

[self startObservingHeight];

 }

 }

- (void)startObservingHeight{  

 [self.webView.scrollView addObserver:self   forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];    

 self.isObserving = YES;

 } 



- (void)stopObservingHeight{  

[self.webView.scrollView removeObserver:self forKeyPath:@"contentSize" context:nil];    self.isObserving = NO;

}



 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary*)change context:(void *)context

{

if ([keyPath isEqualToString:@"contentSize"]) {

self.webView.height = self.webView.scrollView.contentSize.height;

self.scrollView.contentSize = CGSizeMake([UIScreen   mainScreen].bounds.size.width, 200+self.webView.height);

}

}

如果你是编辑，那更简单，直接通过

 [webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id _Nullable height, NSError * _Nullable error) {

  //这里的height就是webView加载完以后的高度，拿到这个高度，你就可以布局页面了

  }];

3.如何让UIWebView展示的页面适配手机屏幕的大小？
没有办法粘贴成代码的格式 就直接上图片了

因为web端和移动端的像素点不一样 所以会造成显示比例不正确的问题，下面是几个参数的具体含义
width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

4.稍微复杂点的编辑功能可能还会涉及到光标的问题，这里也说一下，还是和前端多沟通。让他提供记录和显示光标的方法给你，调用即可。

5.一般用UIWebView做富文本编辑，难免会涉及到键盘的处理问题，下篇博客会详细讨论这个。

这篇博客主要讲的是思路，没什么具体的代码。后续有时间，我会把代码发布到github，最近实在太忙....

希望帮到各位吧 网上富文本编辑的资料确实不多 如果大家有不明白的点 随时在评论里留言 我会看的 因为自己开始做这块的时候也是一脸懵逼 换了2次技术 自己造轮子....折腾的要死...最后还是用了web人员写的东西