富文本ZSSRichTextEditor是iOS原生與網(wǎng)頁交互的集大成者，各種交互。自然問題也是多多，這篇文文章陸續(xù)更新遇到的奇葩問題。
1.問題1：從頭條這種文章里頭復(fù)制粘貼的文章，里邊有圖片，我們需求并不需要，如何過濾？
干了客戶端，一開始額思路，總想從客戶端的webview里頭找出路，忙活半天，并未發(fā)現(xiàn)可以下手的地方，最后只能從網(wǎng)頁這邊想辦法。
最后確定如下思路：
找到html中zss_editor_content這個(gè)div容器的粘貼動(dòng)作（onpaste）-- 在這個(gè)方法中遍歷html內(nèi)容(刪除非我們上傳的圖片)
下面就是為html中的zss_editor_content容器 添加粘貼事件，由于不延時(shí)的話，執(zhí)行zss_editor.deleteOutAppImg方法，即遍歷圖片內(nèi)容的時(shí)候，粘貼還沒完成，所以延時(shí)500ms
<body >
<!-- ZSSRichTextEditor Editable Content -->
<!-- 給這個(gè)容器添加了一個(gè)粘貼事件，延時(shí)500毫秒，不然執(zhí)行事件的時(shí)候，web還沒有內(nèi)容，沒法刪除 -->
<div id="zss_editor_content" onpaste="setTimeout('zss_editor.deleteOutAppImg()', 500);" class="zs_editor_content" contenteditable="true" placeholder="請輸入正文"></div>
</body>
問題來了，如何知道html的圖片不是我們上傳的圖片？？
從圖片本身并無好的方法，只能是正則匹配，不符合我們服務(wù)器圖片的刪去，但是這太牽強(qiáng)了，比如某個(gè)外來圖片剛好符合，那不是gg了
剛好我們的圖片有刪除功能，自然每個(gè)圖片標(biāo)簽在插入的時(shí)候，點(diǎn)擊事件就攜帶了一個(gè)我們定義的屬性，所以通過判斷html內(nèi)容中img是否攜帶這樣的因子，不帶的就不是我們手動(dòng)插入的，刪除（當(dāng)然下面也會(huì)總結(jié)下，刪除圖片的方法）
下面是插入圖片，就是圖片攜帶因子的瞬間
//插入圖片讓換行
zss_editor.insertImage = function(url, alt) {
zss_editor.restorerange();
var html = '<img src="'+url+'" alt="'+alt+'" onclick="zss_editor.deleteImg(0,this)"/><div><br/></div>';
zss_editor.insertHTML(html);
zss_editor.focusEditor();
zss_editor.enabledEditingItems();
}
接下來看看刪除的具體方法，使用還是jquery，高端了
//使用jquery刪除不是自己上傳的圖片--感謝金哥的鼎力相助
/*自己的圖片有zss_editor.deleteImg(0,this)事件，外頭的圖片沒有*/
zss_editor.deleteOutAppImg = function() {
$('img').each(function(index, obj){
if($(this).attr('onclick') != 'zss_editor.deleteImg(0,this)'){
$(this).remove();
}
});
}
到這里這個(gè)外邊圖片的問題就解決了
2.問題2：如何刪除編輯器中已經(jīng)上傳的圖片
嘗試過，網(wǎng)頁直接彈出一個(gè)alertview，但是有坑，網(wǎng)頁控制彈出的alertview，他的title是無法自定義的，一直寫個(gè)null之類的東西，直接棄用
所以最后只能采用，js調(diào)用原生，原生再次調(diào)用js，處理這個(gè)問題
代碼如下;
zss_editor.deleteImg = function(type,obj) {
if(type == 0){
object = obj;
deleteNowImg();//調(diào)用原生方法
}else {
$(object).remove();
}
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.editorLoaded = YES;
if (!self.topTitleHTML) {
self.topTitleHTML = @"";
}
if (!self.internalHTML) {
self.internalHTML = @"";
}
[self updateTitleHTML];
[self updateHTML];
if(self.placeholder) {
[self setPlaceholderText];
}
if (self.customCSS) {
[self updateCSS];
}
if (self.shouldShowKeyboard) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//[self focusTitleTextEditor];
});
}
/*
Callback for when text is changed, solution posted by richardortiz84 https://github.com/nnhubbard/ZSSRichTextEditor/issues/5
*/
JSContext *ctx = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ctx[@"contentUpdateCallback"] = ^(JSValue *msg) {
if (_receiveEditorDidChangeEvents) {
[self editorDidChangeWithText:[self getText] andHTML:[self getHTML]];
}
[self checkForMentionOrHashtagInText:[self getText]];
};
[ctx evaluateScript:@"document.getElementById('zss_editor_content').addEventListener('input', contentUpdateCallback, false);"];
ctx[@"zqk"] = ^(JSValue *msg) {
[[NSNotificationCenter defaultCenter] postNotificationName:RichTextTitleFocus object:nil];
};
[ctx evaluateScript:@"document.getElementById('zss_editor_title').addEventListener('focus', zqk, false);"];
ctx[@"qkz"] = ^(JSValue *msg) {
[[NSNotificationCenter defaultCenter] postNotificationName:RichTextContentFocus object:nil];
};
[ctx evaluateScript:@"document.getElementById('zss_editor_content').addEventListener('focus', qkz, false);"];
MJWeakSelf;
ctx[@"deleteNowImg"] = ^() {//刪除圖片
dispatch_async(dispatch_get_main_queue(), ^{
[weakSelf deleteImg];
});
};
}
- (void)deleteImg {
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示"
message:@"確認(rèn)刪除圖片?"
delegate:self
cancelButtonTitle:@"取消"
otherButtonTitles:@"確定",nil];
[alert show];
}
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
if (buttonIndex == 1) {
NSString *trigger = [NSString stringWithFormat:@"zss_editor.deleteImg(\"%@\", \"%@\");", @"1", @""];
[self.editorView stringByEvaluatingJavaScriptFromString:trigger];//原生通過js調(diào)用刪除方法
}
}
兩端交互，實(shí)現(xiàn)圖片的刪除功能
