富文本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

富文本ZSSRichTextEditor之趟坑集锦的更多相关文章

  1. 百度小程序富文本bdParse遇到的坑

    百度开发工具能正常显示文章图文详情, web浏览也可以, app浏览就不行, 审核说兼容性问题, 都不是, 后来发现是后台传输的数据问题, 不能用json_encode()返回数据

  2. ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  3. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  4. angular-froala-wysiwyg 富文本编辑器使用及遇到的坑

    介绍: angular-froala-wysiwyg: froala editor 的angular版本,支持Angular 2, Angular 4, Angular 5, Angular 6 an ...

  5. Vue之富文本tinymce爬坑录

    前言 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器. *案例demo版本:vue-t ...

  6. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

  7. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  8. 关于富文本在Android中的应用以及遇到的坑

    富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持.这里推荐一款合适的第三方富文本框架,richeditor. 首先我们要使用该功能需要引入相关j ...

  9. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

随机推荐

  1. 03Qt信号与槽（2）

    1. 元对象工具 ​ 元对象编译器 MOC(meta object compiler)对 C++ 文件中的类声明进行分析并产生用于初始化元对象的 C++ 代码,元对象包含全部信号和槽的名字及指向这些函 ...

  2. 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  3. paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之onehot coding styles(index-parameter style with registered outputs)

    case语句中,对于state/next 矢量仅仅做了1-bit比较. parameter 值不是表示FSM的状态编码,而是表示state/next变量的索引.

  4. 《linux设备驱动开发详解》笔记——18 ARM linux设备树

    18.1 设备树的起源 linux 2.6及之前,大量板级信息被硬编码到内核里,十分庞大,大量冗余代码: linux 2.6之前,引入了设备树: 设备树源于OpenFirmware,描述硬件的数据结构 ...

  5. 封装，封装的原理，Property ，setter ，deleter，多态，内置函数 ，__str__ ， __del__，反射，动态导入模块

    1,封装 ## 什么是封装 what 对外隐藏内部的属性,以及实现细节,并给外部提供使用的接口 学习封装的目的:就是为了能够限制外界对内部数据的方法 注意 :封装有隐藏的意思,但不是单纯的隐藏 pyt ...

  6. rs485多主

    因复位时I/O口都输出高电平.如果把I/O口直接与RS-485接口芯片的驱动器使能端DE端相连,会在CPU复位其间DE为高,从而使本节点处于发送状态.如果此时总线上其它节点在发送数据,则此次数据传输将 ...

  7. hdu 5441

    Travel Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  8. SPOJ 1825 Free tour II 树分治

    题意: 给出一颗边带权的数,树上的点有黑色和白色.求一条长度最大且黑色节点不超过k个的最长路径,输出最长的长度. 分析: 说一下题目的坑点: 定义递归函数的前面要加inline,否则会RE.不知道这是 ...

  9. 提交AppStore被拒原因总结

    (1)Information Needed We began the review of your app but aren’t able to continue because we need ad ...

  10. [POJ 1001] Exponentiation C++解题报告 JAVA解题报告

        Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 126980   Accepted: 30 ...