富文本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
富文本ZSSRichTextEditor之趟坑集锦的更多相关文章
- 百度小程序富文本bdParse遇到的坑
百度开发工具能正常显示文章图文详情, web浏览也可以, app浏览就不行, 审核说兼容性问题, 都不是, 后来发现是后台传输的数据问题, 不能用json_encode()返回数据
- ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- angular-froala-wysiwyg 富文本编辑器使用及遇到的坑
介绍: angular-froala-wysiwyg: froala editor 的angular版本,支持Angular 2, Angular 4, Angular 5, Angular 6 an ...
- Vue之富文本tinymce爬坑录
前言 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器. *案例demo版本:vue-t ...
- 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 关于富文本在Android中的应用以及遇到的坑
富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持.这里推荐一款合适的第三方富文本框架,richeditor. 首先我们要使用该功能需要引入相关j ...
- Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
随机推荐
- 让Web站点崩溃最常见的七大原因
转载自: https://blog.csdn.net/u012981511/article/details/53503242 1. 磁盘已满 导致系统无法正常运行的最可能的原因是磁盘已满.一个好的网络 ...
- DC课程目标
- 【php】instanceof
instanceof 的使用还有一些陷阱必须了解.在 PHP 5.1.0 之前,如果要检查的类名称不存在,instanceof 会调用__autoload().另外,如果该类没有被装载则会产生一个致命 ...
- R-data.table
data.table可以扩展和增强data.frame的功能,在分组操作和组合时访问速度更快. require(data.table) theDT = data.table(A=1:10, B=let ...
- JAVA基础篇—HashMap
/class Depositor package 银行储户; public class Depositor { private String id; private String name; priv ...
- 关于stm32优先级大小的理解
转载自:https://www.cnblogs.com/ZKeJun/p/6112591.html 一. 组别:0>1>2>3>4 组别优先顺序(第0组优先级最强,第4组优 ...
- debian 7 安装vagrant
下载 vagrant_1.4.3_x86_64.deb: $ wget http://966b.http.dal05.cdn.softlayer.net/data-production/2f0b88e ...
- MySQL主从复制(Master-Slave)
MySQL数据库自身提供的主从复制功能可以方便的实现数据的多处自动备份,实现数据库的拓展.多个数据备份不仅可以加强数据的安全性,通过实现读写分离还能进一步提升数据库的负载性能. 下图就描述了一个多个数 ...
- 百度地图的API接口----多地址查询和经纬度
最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...
- cache共享问题
经测试发现,cache在web中与windows service中是不能共享的.但在windows service可以使用cache.