最近負責(zé)公司產(chǎn)品筆記模塊的開發(fā)，設(shè)計到富文本編輯的功能。剛開始做的時候并沒有考慮到和web端對接，直接用UITextView來實現(xiàn)富文本的編輯和展示，TextKit非常強大。等到在網(wǎng)頁端展示和編輯的時候，就會出現(xiàn)一些格式的錯亂。原因為web端的富文本編輯用的是前端人員自己寫的一套css樣式。所以，為了統(tǒng)一格式，iOS端也應(yīng)按照web端使用的css基于網(wǎng)頁進行渲染。于是半個月的coding白費....換成UIWebView重新寫。

這里稍微提一下為什么沒有用WKWebView。做之前偷偷去有道云筆記的用戶群里問了，他們技術(shù)回答目前使用的是UIWebView，目前也還沒考慮更換為WKWebView?？赡苁且驗閃KWebView坑比較大？不知道.....

首先需要從前端人員那里要到他們用的css文件，CSS一般是3種用法：外部樣式表，內(nèi)部樣式表和行內(nèi)樣式表，這里主要講解外部樣式表：在head部分加入,引入外部的CSS文件。這種方法可以說是現(xiàn)在占統(tǒng)治地位的引入方法。如同IE與瀏覽器。這也是最能體現(xiàn)CSS特點的方法；最能體現(xiàn)DIV+CSS中的內(nèi)容與顯示分離的思想，也最易改版維護，代碼看起來也是最美觀的一種。本人項目里使用的就是外鏈的css。

將前端寫好的富文本編輯器加入到項目中，初始化UIWebView的時候加載本地的html文件即可。

   NSBundle *bundle = [NSBundle mainBundle];

   NSURL *indexFileURL = [bundle URLForResource:@"editor" withExtension:@"html"];

   [webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];    

這里注意：此html文件里應(yīng)該包含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就需要你手動寫上。

好，接下來介紹具體的使用：

1. 各種樣式的渲染，這個你需要和你前端溝通，他會告訴你本地的html文件里有哪些js方法是用來觸發(fā)富文本格式的。你調(diào)用這些方法即可。代碼如下（這里的RE是js對象，也就是在你本地html里的js文件中的全局對象，通過它來調(diào)用那些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()"];
    }
}

2. 如何讓UIWebView展示的頁面適配手機屏幕的大小
   在html的head標(biāo)簽里加入這段樣式標(biāo)簽：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

因為web端和移動端的像素點不一樣 所以會造成顯示比例不正確的問題，下面是幾個參數(shù)的具體含義
width - viewport的寬度 height - viewport的高度initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放

3. 稍微復(fù)雜點的編輯功能可能還會涉及到光標(biāo)的問題，這里也說一下，還是和前端多溝通。讓他提供記錄和顯示光標(biāo)的方法給你，調(diào)用即可。

4. 監(jiān)聽UIWebView上的點擊事件。讓前端在視圖點擊的時候給你發(fā)送一個請求，通過shouldStartLoadWithRequest:方法去攔截這個請求做相應(yīng)的事件處理：

#pragma mark - 富文本狀態(tài)監(jiān)聽 鏈接 等
-(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) {//編輯的狀態(tài)下才能實時保存 新建筆記時無法實時保存 因為沒有id
                    [self realTimeUploadContentToTheServer];
                }
            }
            return NO;
        }
    }
    return YES;
}

希望幫到各位吧 網(wǎng)上富文本編輯的資料確實不多 如果大家有不明白的點 隨時在評論里留言 我會看的。