2019-10-11 由于 iOS 13 之后 UIWebView 廢棄，所以將項目中的UIWebView 替換為 WKWebView。請看我的這篇文章iOS 富文本編輯器-WKWebView。以下內(nèi)容在 iOS 13 之后不再適用。

ZSSRichTextEditor 是一款基于 webView 的富文本編輯器。由于項目需要，本著學(xué)習(xí)態(tài)度在ZSSRichTextEditor基礎(chǔ)上借用下這位同學(xué)的項目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)頁按鈕進行交互

導(dǎo)入系統(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() {}

新增標(biāo)題與副標(biāo)題

editor.html

<div id="vj_title">
     <input id="vj_article_title" maxlength="70" type="text" placeholder="請輸入標(biāo)題">
</div>
<div id="vj_abstract-title">
    <input id="vj_article_abstract" maxlength="35" type="text" placeholder="請輸入文章摘要">
</div>

詳細(xì)代碼請看項目 https://github.com/Vergil-wj/RichTextEditor

參考資料：

ZSSRichTextEditor

WGEditor