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样式文件
Snip20160729_10.png
如果你使用的是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展示的页面适配手机屏幕的大小？
没有办法粘贴成代码的格式 就直接上图片了
Snip20160729_12.png
因为web端和移动端的像素点不一样 所以会造成显示比例不正确的问题，下面是几个参数的具体含义
width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
4.稍微复杂点的编辑功能可能还会涉及到光标的问题，这里也说一下，还是和前端多沟通。让他提供记录和显示光标的方法给你，调用即可。
5.一般用UIWebView做富文本编辑，难免会涉及到键盘的处理问题，下篇博客会详细讨论这个。
这篇博客主要讲的是思路，没什么具体的代码。后续有时间，我会把代码发布到github，最近实在太忙....
希望帮到各位吧 网上富文本编辑的资料确实不多 如果大家有不明白的点 随时在评论里留言 我会看的 因为自己开始做这块的时候也是一脸懵逼 换了2次技术 自己造轮子....折腾的要死...最后还是用了web人员写的东西
