富文本ZSSRichTextEditor之趟坑集锦

富文本ZSSRichTextEditor是iOS原生与网页交互的集大成者，各种交互。自然问题也是多多，这篇文文章陆续更新遇到的奇葩问题。

1.问题1：从头条这种文章里头复制粘贴的文章，里边有图片，我们需求并不需要，如何过滤？

干了客户端，一开始额思路，总想从客户端的webview里头找出路，忙活半天，并未发现可以下手的地方，最后只能从网页这边想办法。

最后确定如下思路：

找到html中zss_editor_content这个div容器的粘贴动作（onpaste）-- 在这个方法中遍历html内容(删除非我们上传的图片)

下面就是为html中的zss_editor_content容器 添加粘贴事件，由于不延时的话，执行zss_editor.deleteOutAppImg方法，即遍历图片内容的时候，粘贴还没完成，所以延时500ms

问题来了，如何知道html的图片不是我们上传的图片？？

• 从图片本身并无好的方法，只能是正则匹配，不符合我们服务器图片的删去，但是这太牵强了，比如某个外来图片刚好符合，那不是gg了

• 刚好我们的图片有删除功能，自然每个图片标签在插入的时候，点击事件就携带了一个我们定义的属性，所以通过判断html内容中img是否携带这样的因子，不带的就不是我们手动插入的，删除（当然下面也会总结下，删除图片的方法）

下面是插入图片，就是图片携带因子的瞬间

//插入图片让换行
zss_editor.insertImage = function(url, alt) {
    zss_editor.restorerange();
    var html = '

';
    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();
      }
    });
}

到这里这个外边图片的问题就解决了

2.问题2：如何删除编辑器中已经上传的图片
尝试过，网页直接弹出一个alertview，但是有坑，网页控制弹出的alertview，他的title是无法自定义的，一直写个null之类的东西，直接弃用

所以最后只能采用，js调用原生，原生再次调用js，处理这个问题
代码如下;

zss_editor.deleteImg = function(type,obj) {
    if(type == 0){
        object = obj;
        deleteNowImg();//调用原生方法
    }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:@"确认删除图片?"
                                                   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调用删除方法
    }
}

两端交互，实现图片的删除功能