zoukankan      html  css  js  c++  java
  • 富文本ZSSRichTextEditor之趟坑集锦

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

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

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

    #####最后确定如下思路:


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

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

    <body >
        <!-- ZSSRichTextEditor Editable Content -->
        <!-- 给这个容器添加了一个粘贴事件,延时500毫秒,不然执行事件的时候,web还没有内容,没法删除 -->
        <div id="zss_editor_content" onpaste="setTimeout('zss_editor.deleteOutAppImg()', 500);" class="zs_editor_content" contenteditable="true" placeholder="请输入正文"></div>
    
    </body>
    



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

    • 从图片本身并无好的方法,只能是正则匹配,不符合我们服务器图片的删去,但是这太牵强了,比如某个外来图片刚好符合,那不是gg了
    • 刚好我们的图片有删除功能,自然每个图片标签在插入的时候,点击事件就携带了一个我们定义的属性,所以通过判断html内容中img是否携带这样的因子,不带的就不是我们手动插入的,删除(当然下面也会总结下,删除图片的方法)

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

    //插入图片让换行
    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();
          }
        });
    }


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

    2.问题2:如何删除编辑器中已经上传的图片


    尝试过,网页直接弹出一个alertview,但是有坑,网页控制弹出的alertview,他的title是无法自定义的,一直写个null之类的东西,直接弃用

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

    zss_editor.deleteImg = function(type,obj) {
        if(type == 0){
            object = obj;
            deleteNowImg();//调用原生方法
        }else {
             $(object).remove();
        }
    }

     

    //在该方法里定义了如下方法,原生调用js
    - (void)webViewDidFinishLoad:(UIWebView *)webView { MJWeakSelf; ctx[@"deleteNowImg"] = ^() {//删除图片 dispatch_async(dispatch_get_main_queue(), ^{ [weakSelf deleteImg]; }); }; }
    //原生方法,调用alertview
    - (void)deleteImg { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"确认删除图片?" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定",nil]; [alert show]; }
    //再次交互,原生调用js,删除图片 -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{ if (buttonIndex == 1) { NSString *trigger = [NSString stringWithFormat:@"zss_editor.deleteImg("%@", "%@");", @"1", @""]; [self.editorView stringByEvaluatingJavaScriptFromString:trigger];//原生通过js调用删除方法 } }

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

     

    codeBy-Zqk 2018-03-21 08:45:08

  • 相关阅读:
    自食其力!ASP.NET 4打造HTML5视频控件
    delphi 拖放操作http://topic.csdn.net/t/20030306/10/1497344.html?1026446129
    delphi开发的小技巧http://www.cto360.com/a/5000086716.shtml
    TThread 类 详细解析 (原帖 华夏黑客同盟)http://www.cppblog.com/Khan/archive/2006/11/21/15503.html
    delphi 多线程同步 互斥变量,信号量,事件对象。http://www.bianceng.cn/Programming/Delphi/200912/12689.htm
    如何利用socket进行HTTP访问http://blog.csdn.net/sanfengshou/archive/2011/03/07/6228250.aspx
    TCP, Scoket, HTTP
    Delphi开发嵌入式IE浏览器监控程序http://www.pasou.cn/edu/html/List3899_3.html
    Delphi实现网络蚂蚁和FlashGet的悬浮窗口,拖动
    delphi调用C#写的web服务例子(重点 InvRegistry.RegisterInvokeOptions(TypeInfo(ServiceSoap), ioDocument);)
  • 原文地址:https://www.cnblogs.com/widgetbox/p/8615034.html
Copyright © 2011-2022 走看看