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样式文件

Snip20180711_11.png

如果你使用的是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标签里加入这段样式标签：

因为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;
}

希望帮到各位吧网上富文本编辑的资料确实不多如果大家有不明白的点随时在评论里留言我会看的。

iOS富文本编辑的实现

你可能感兴趣的:(iOS富文本编辑的实现)