最近负责公司产品笔记模块的开发，设计到富文本编辑的功能。刚开始做的时候并没有考虑到和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就需要你手动写上。
好，接下来介绍具体的使用：
- 各种样式的渲染，这个你需要和你前端沟通，他会告诉你本地的html文件里有哪些js方法是用来触发富文本格式的。你调用这些方法即可。代码如下（这里的RE是js对象，也就是在你本地html里的js文件中的全局对象，通过它来调用那些js代码）：
- (void)richTextEditorToolbarDidSelectBold{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setBold();"];
}
- (void)richTextEditorToolbarDidSelectItalic{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setItalic();"];
}
- (void)richTextEditorToolbarDidSelectUnderline{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setUnderline();"];
}
- (void)richTextEditorToolbarDidSelectStrikeThrough{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setStrikeThrough();"];
}
- (void)richTextEditorToolbarDidSelectBulletPoint{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setInsertUnorderedList();"];
}
- (void)richTextEditorToolbarDidSelectBulletNumber{
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setInsertOrderedList();"];
}
- (void)richTextEditorToolbarDidSelectTextAlignment:(NSTextAlignment)textAlignment{
if (textAlignment == NSTextAlignmentLeft) {
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setJustifyLeft();"];
}
if (textAlignment == NSTextAlignmentRight) {
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setJustifyRight();"];
}
if (textAlignment == NSTextAlignmentCenter) {
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setJustifyCenter();"];
}
}
- (void)richTextEditorToolbarDidSelectParagraphIndentation:(ParagraphIndentation)paragraphIndentation{
if (paragraphIndentation == ParagraphIndentationDecrease) {
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setIndent();"];
}
if (paragraphIndentation == ParagraphIndentationIncrease) {
[self.noteContentView stringByEvaluatingJavaScriptFromString:@"RE.setOutdent()"];
}
}
- 如何让UIWebView展示的页面适配手机屏幕的大小
在html的head标签里加入这段样式标签：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
因为web端和移动端的像素点不一样 所以会造成显示比例不正确的问题，下面是几个参数的具体含义
width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
稍微复杂点的编辑功能可能还会涉及到光标的问题，这里也说一下，还是和前端多沟通。让他提供记录和显示光标的方法给你，调用即可。
监听UIWebView上的点击事件。让前端在视图点击的时候给你发送一个请求，通过shouldStartLoadWithRequest:方法去拦截这个请求做相应的事件处理：
#pragma mark - 富文本状态监听 链接 等
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *urlStr = request.URL.absoluteString;
if (urlStr) {
if ([urlStr hasPrefix:@"re-"]) {
if ( [urlStr hasPrefix:@"re-attach://"]){
[self setPreViewAccessoryViewVCWithPrefixAttchAndUrlStr:urlStr];
}
if ([urlStr hasPrefix:@"re-img"]) {
[self setPreViewAccessoryViewVCWithPrefixImgAndUrlStr:urlStr];
}
if ([urlStr hasPrefix:@"re-link://"]) {
NSString *urlString = [[urlStr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding] substringFromIndex:10];
[[UIApplication sharedApplication]openURL:[NSURL URLWithString:urlString]];
}
if ([urlStr hasPrefix:@"re-state://"]) {
}
if ([urlStr hasPrefix:@"re-at://"]) {
[self mentionOtherColleague];
}
if ([urlStr hasPrefix:@"re-callback://"]) {
}
if ([urlStr hasPrefix:@"re-throttle-callback://"]) {
if (!self.isCreate) {//编辑的状态下才能实时保存 新建笔记时无法实时保存 因为没有id
[self realTimeUploadContentToTheServer];
}
}
return NO;
}
}
return YES;
}
希望帮到各位吧 网上富文本编辑的资料确实不多 如果大家有不明白的点 随时在评论里留言 我会看的。
