iOS 富文本编辑器-UIWebView

2019-10-11 由于 iOS 13 之后 UIWebView 废弃，所以将项目中的UIWebView 替换为 WKWebView。请看我的这篇文章iOS 富文本编辑器-WKWebView。以下内容在 iOS 13 之后不再适用。

ZSSRichTextEditor 是一款基于 webView 的富文本编辑器。由于项目需要，本着学习态度在ZSSRichTextEditor基础上借用下这位同学的项目WGEditor 的 UI，进行了修改。我的项目地址：https://github.com/Vergil-wj/RichTextEditor

富文本编辑器设计的知识点

Objective-C 语言调用 JavaScript 语言

通过UIWebView的 - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。这样我们就可以实现文字的加粗、下划线、斜体等等一切我们想要的样式。

详见我的项目中 UIWebView+VJJSTool.m 文件。

JavaScript语言调用Objective-C语言

两种方式，都是在 UIWebView 的 delegate 中操作；

第一种：拦截 URL

ZSSRichTextEditor.js：

if (artContent == document.activeElement) {
        window.location = "callback://0/"+items.join(',');
}

ZSSRichTextEditor.m：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    NSString *urlString = [[request URL] absoluteString];
    NSLog(@"urlString = %@",urlString);
    
    [self handleEvent:urlString];
    
    return YES;
}

通过 url 判断，进行下一步操作。

第二种：点击网页按钮进行交互

导入系统库JavaScriptCore

#import 

editor.html:

ZSSRichTextEditor.m:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *ctx = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    ctx[@"方法名"] = ^() {
        //执行我们想要的操作 
    };
}

输入文字时，插入符号位置计算

ZSSRichTextEditor.js

zss_editor.updateOffset = function() {}

zss_editor.calculateEditorHeightWithCaretPosition = function() {}

新增标题与副标题

editor.html

详细代码请看项目 https://github.com/Vergil-wj/RichTextEditor

参考资料：

ZSSRichTextEditor

WGEditor