开发者社区> 余书懿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

重磅出击 实现IOS下内嵌HTML编辑器 Objective-C 与 JavaScript 通信攻关

简介: 通过接近N天的努力. 终于在今天.IOS下内嵌HTML编辑器的Demo 基本实现. 学习过程中,参考了很多网上的资料.很感谢这些分享资源的牛人.有你们.
+关注继续查看

通过接近N天的努力. 终于在今天.IOS下内嵌HTML编辑器的Demo 基本实现.

学习过程中,参考了很多网上的资料.很感谢这些分享资源的牛人.有你们.. 才能顺利拿下这个比较特别的需求.

我使用的HTML编辑器是金山开源的 KindEditor        

利用UIWebView 加载 KindEditor (也就是我说的内嵌). 实现IOS下用户可以进行富文本编辑.

主要目的是保证服务端的内容值不丢失.亦可在移动端对内容进行一些简单的修改.


途中难点在于,如何与 KindEditor 的进行数据交互.

百度谷歌一把. 牛人被我找到了: Objective-C 与 JavaScript 通信攻关

这个开源项目对通信代码进行了包装. 使用起来非常简单. 最关键基于SBJson 进行 Json 传参. 结构清晰明了.


实现方面将KindEditor 直接加入程序包中,做为整个Demo的一部分. 当然咯,这避免不了安装包会变大一些.(不知道App Store审核方面允不允许. 有点担忧.)

但访问本地网页的速度非常值得信赖,也算是有得有失吧. 总之,根据实际情况:可以酌情修改是本地还是外部访问.

本次的Demo完成后,唯一遗憾的是4.X的IOS版本对JavaScript的支持还不够完善,导致KindEditor的显示和执行. 都无法正常工作.

为此. 只能利用UITextView 在载入HTML内容时,以进行一些简单的内容过滤. 只支持识别  空格,换行.两项. 至于其他HTML标签都会被扫描裁剪掉.

5.X以上的IOS版本.就可以完美支持.可见Safari对JavaScript的支持在一点一点的完善.(不知道说的对不对.)


我在Demo中加入了IOS版本识别. 以确定到底加载UITextView 还是 UIWebView.


本Demo的亮点是基于自定义控件的思想去实现的. 

我们后面在使用时.非常方便.只需要实例化自定义控件,设置好控件的位置和大小. 实现仅一个必要的委托

customerHTMLEditor = [[UICustomHTMLEditoralloc]init];

customerHTMLEditor.delegate =self;

[self.viewaddSubview:customerHTMLEditor];

当然,肯定还有很多地方需要完善,非常希望能够提出宝贵的建议和想法.以便做出更完善的自定义控件.

附上一张效果图,展示下我的成果:




最后附上本次博文的 Demo. 以供下载学习交流.

Demo


Date:2012-04-11

今天为Demo 完善了两个细节

1:修改了初始化方法,让自定义控件可以加载来自服务器的HTML编辑器. 只需要将HTML编辑器文件拷贝到服务器指定位置,在初始化时提供正确的链接即可加载

2:在UIWebView加载HTML编辑器时,显示Loading 成功加载后,隐藏Loading. 使用了第三方开源Loading库(MBProgressHUB).



Date:2012-05-09

经过接近一个月的沉淀,Demo有了全新的改进

1:内存问题调优

2:正则表达式智能缓存图片标签<IMG>

3:JS与OC的通信接口添加新的类型参数

全新的Demo:Demo


Data:2012-07-10

去除编辑器的背景色的方式

修改样式文件,路径如下:

/Users/amarishuyi/Desktop/Work/FEOA 1.0/FEOA Other/KindEditor/themes/default/default.css

搜索FFF.  将找到的第一行删除即可



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
0 0
JavaScript的字符串之HTML包装方法
JavaScript的字符串之HTML包装方法 前面以前文章我们讲解了字符串的各种方法。这篇文章对字符串的方法进行一些补充。 1.字符串的indexOf()和lastIndexOf()方法的补充 var str='hello world'; // indexOf() lastIndexOf() // 不加第二个参数 console.log(str.indexOf("l");// 2 console.log(str.lastIndexOf("l");// 9 console.log(str.indexOf("l",5));// 9 5之后
0 0
html通过js调用ios或android代码
html通过js调用ios或android代码
0 0
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
0 0
页面访问时渲染过程中 HTML、JS 的关系
之前写过一篇关于不同 DOM 操作结果不同的文章,那篇文章只是简单的介绍了一下 HTML 及外部资源与 JS 脚本执行的一个时机,其实这个还可以再拓展一下,比如 JS 和 DOMContentLoad
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
JS和HTML笔记
JS和HTML笔记
0 0
HTML+CSS+JAVASCRIPT实现——球球坠落小游戏
本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分
0 0
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
0 0
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
本篇文章,主要讲解一下如何创建一个响应式登录注册表单
0 0
+关注
余书懿
喜欢苹果,痴情技术! 专注于移动互联网,做出好产品改变世界^^! My Github https://github.com/yushuyi
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载