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

通过接近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.  将找到的第一行删除即可