苹果手机HTML 文本编辑器,ios富文本编辑器
方案:html+wkwebview,支持加粗、下划线、斜体、对齐方式、字体更改颜色、插入图片、插入视频、插入链接、清除格式、撤回上一个操作
核心:利用html5新特性contenteditable,当div的contenteditable为true时,div进入编辑状态,可以通过执行html5的命令对文本进行操作。命令文档地址:https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。
具体实现:
一:文件目录
1.editor.html,该文件实现了编辑器的节点骨架,一个contenteditable为true的div。
2.ZJSTextEditor.js,该文件是编辑器的核心内容,主要实现编辑器的各种操作,以插入视频为例,外部的wkwebview只需要执行js方法evaluateJavaScript:‘zss_editor.insertVideo(...)’,将url带入zss_editor.insertVideo =function(videoUrl) {
var poster = videoUrl+'?vframe/jpg/offset/5/w/210';
var str = '';
zss_editor.insertHTML(str);
zss_editor.insertP();
zss_editor.deleteNode('deleteBr');
}
zss_editor.insertP = function() {
var contentDiv = document.getElementById("zss_editor_content");
var p = document.createElement("p");
contentDiv.appendChild(p);
}
zss_editor.insertHTML = function(str) {
var result = document.execCommand('insertHTML', false, str);
if(result == false) {
$('#zss_editor_content').html(str);
}
}
3.EditorView这个文件主要是放wkwebview,以及wkwebview调用ZJSTextEditor.js中js方法的部分。如页面加载完,设置占位文字,或者默认对一些标签的处理- (void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation {
NSLog(@"页面加载完毕");
[[UIApplication sharedApplication].keyWindow zjs_removeIndicatorWithBackgroundColor];
if(_webView) {
NSString *trigger = @"zss_editor.setDefualt();";
[self.webViewevaluateJavaScript:triggercompletionHandler:^(id_Nullableres,NSError*_Nullableerror) {
if(error) {
DLog(@"===%@",error);
}
}];
NSString*setPlaceHolder =@"zss_editor.placeholder();";
[self.webViewevaluateJavaScript:setPlaceHoldercompletionHandler:^(id_Nullableres,NSError*_Nullableerror) {
if(error) {
DLog(@"===%@",error);
}
}];
}
}
文件目录
二:开发中产品提出的需求和我的设计方案
1.web端要求dom结构为
...
...
...
...
...
,也就是n个p里包含着你插入的视频图片等子节点?
我的方案:
1.1:在editor.html文件中插入的div中,插入一个默认的空p标签
1.2:在插入图片后加入一个空p,在文字中间插入视频后加入一个空的p和br再删除br,插入br是为了在文字中间插入视频时,让系统自动给你补全p标签,否则视频会被加在该文字的下一行。
2.每个图片要紧紧跟随一个图片输入框,且图片输入框支持粘贴,且图片和图片输入框可以通过某个按钮同时被删除?
我的方案:
图片有三个途径添加,第一个是粘贴来的新闻中带有图片,第二个是自己插入的图片,第三个是从html刚刚开始加载时自带图片(从web端发布的文章,在ios端编辑)。
2.1:每个图片要紧紧跟着一个图片输入框,我在三个途径处分别做了图片的处理,首先是自己插入的图片,我在插入图片时,紧接着插入一个textarea标签和一个p标签。插入一个p标签的目的是满足需求1,其次是粘贴来的新闻和html刚刚加载自带的图片,我选择遍历所有的图片标签,首先检查img标签的name属性是否有值,若没有值,新增textarea标签,并设置img标签和textarea标签的name属性为同一个UUID,若name属性有值,检查它的后一个兄弟节点是否跟随一个同name的dom,如果有且是i标签(提交数据时,要将所有的输入框变成i标签,此刻要从i标签变回输入框),将它转化成输入框,如果没有,添加默认输入框。
2.2:图片输入框支持粘贴,textarea自带粘贴
2.3:图片和图片输入框可以通过某个按钮同时被删除,设置img标签和textarea标签的name属性为同一个UUID,用name的原因是document.getElementsByName给的是该name的一组标签,删除时,只需要根据name删除即可
3.从微信或者头条粘贴过来的文章格式有误,文字偏大或者偏小?
我的解决方案:
由于拿不到原文章的js,所以只能在粘贴时去除标签内的所有内联样式。当然这个地方有个特殊情况要处理,比如用户在编辑时,设置了对齐方式,系统会自动给标签加上内联样式,这个样式我们不应该去掉。我的处理方案时自定义一个属性名zjs-style,在用户设置对齐方式时,将标签的style值赋值给zjs-style,我们在合适的时机,根据zjs-style复原其style
4.输入框在提交后变成不可输入的展示区域?
我的解决方案:
在提交时,遍历所有的textarea,若textarea没有值,去掉该textarea,若有值的话,将该textarea替换成i标签,且name值赋值给新的i。
5.从web端来的数据支持展示和再编辑?
我的解决方案:
在editor.html的div中加入默认占位文字,在html资源加载前,将占位文字替换为后台给的html内容,并在网页加载完后,做相关处理
调试工具:
;
调试工具
苹果手机HTML 文本编辑器,ios富文本编辑器相关推荐
- 文本编辑器_markdown编辑器与富文本编辑器优缺点比较
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用方 ...
- Markdown编辑器 vs.富文本编辑器:介绍/优缺点 (未完更新中)
那天学习python到深夜,第一次想在CSDN 想发表文章. 跳出界面让我选择用:Markdown编辑器还是富文本编辑器. 什么?当时便蒙了,我只是想平常一样,写一点日记而已啊,这么不友好的吗? 它既 ...
- markdown编辑器与富文本编辑器优缺点比较,哪个更好用
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用 ...
- iOS富文本字符串AttributedString详解
原文链接: iOS富文本字符串AttributedString详解 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://gi ...
- iOS富文本组件的实现—DTCoreText源码解析 数据篇
本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需 ...
- ios 富文本 邮件_如何使iOS 10将语音邮件转录为文本
ios 富文本 邮件 iOS has had a visual voicemail menu since the beginning, allowing you to browse and liste ...
- unity学习笔记-text文本识别html富文本(待改进)
unity学习笔记 text文本识别html富文本(待改进) 需求 逻辑 实现 xlua的安装 配置到unity 使用 改进优化(待改进) text文本识别html富文本(待改进) 需求 项目里需要将 ...
- kind富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
- vue 富文本存储_Vue富文本编辑器
效果图: image.png 此处介绍一个好用的 Tinymce 富文本编辑器,也是 vue-element-admin 后台管理项目中所用到的.(都有现成的了,不妨拿来用) image.png im ...
最新文章
- 程序人生:入门程序员最容易踩的 7 个坑!
- 【渝粤题库】陕西师范大学202011 微观经济学 作业 (专升本、高起本)
- Bginfo软件在域的部署和应用
- 调整latex表格_选择LaTeX还是Word的建议
- oss图片跨域问题_图片存储解决方案-阿里云对象存储
- zabbix 监控tomcat
- (最新)面向科研人员的免费遥感数据集
- MySQL函数大全,MySQL常用函数以及用法汇总
- 妈耶,摆脱机器音,二次宅的歌姬女友彻底活了!
- windows 计算机 快捷键,Windows7计算器快捷键汇总
- Mac OS X Safari 插件存放位置
- 时间序列——深圳人口预测
- html 大转盘游戏,HTML5 Canvas大转盘抽奖活动页面代码
- 针对m3u8视频加密的一些尝试
- WZOI-261疯狂吃鸡腿2
- VMware虚拟机使用总结
- 入门 | 走近流行强化学习算法:最优Q-Learning
- Linux为什么最多能分4个四个主分区
- 逆天了,俄罗斯黑客一口气黑掉60多所大学和政府机构
- 深耕核心技术·赋能数字化转型 ——大快搜索黑科技亮相2019(第四届)大数据产业生态大会,斩获多项大奖...