2019-10-11 由于 iOS 13 之后 UIWebView 廢棄阐滩，所以將項目中的UIWebView 替換為 WKWebView馋贤。請看我的這篇文章iOS 富文本編輯器-WKWebView疾忍。以下內(nèi)容在 iOS 13 之后不再適用端蛆。
ZSSRichTextEditor 是一款基于 webView 的富文本編輯器。由于項目需要考赛，本著學習態(tài)度在ZSSRichTextEditor基礎(chǔ)上借用下這位同學的項目WGEditor 的 UI惕澎，進行了修改。我的項目地址：https://github.com/Vergil-wj/RichTextEditor
富文本編輯器設(shè)計的知識點
Objective-C 語言調(diào)用 JavaScript 語言
通過UIWebView的 - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法來實現(xiàn)的颜骤。這樣我們就可以實現(xiàn)文字的加粗唧喉、下劃線、斜體等等一切我們想要的樣式忍抽。
詳見我的項目中 UIWebView+VJJSTool.m 文件八孝。
JavaScript語言調(diào)用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 判斷干跛，進行下一步操作。
第二種：點擊網(wǎng)頁按鈕進行交互
導入系統(tǒng)庫JavaScriptCore
#import <JavaScriptCore/JavaScriptCore.h>
editor.html:
<script>
var div = document.getElementById('vj_column');
div.addEventListener('click', test);
function test(e) {
方法名("欄目");
}
</script>
ZSSRichTextEditor.m:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *ctx = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ctx[@"方法名"] = ^() {
//執(zhí)行我們想要的操作
};
}
輸入文字時锈锤，插入符號位置計算
ZSSRichTextEditor.js
zss_editor.updateOffset = function() {}
zss_editor.calculateEditorHeightWithCaretPosition = function() {}
新增標題與副標題
editor.html
<div id="vj_title">
<input id="vj_article_title" maxlength="70" type="text" placeholder="請輸入標題">
</div>
<div id="vj_abstract-title">
<input id="vj_article_abstract" maxlength="35" type="text" placeholder="請輸入文章摘要">
</div>
詳細代碼請看項目 https://github.com/Vergil-wj/RichTextEditor
參考資料：
