重磅出击 实现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.  将找到的第一行删除即可



目录
相关文章
|
1天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
17 10
|
29天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
14 0
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
19 3
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符