模仿开心网做的在线html编辑器
最近做社区,产品认准了开心网的编辑器,但是那个笔记其用到prototype框架,而我们使用的jquery-1.2.2.js,两者有冲突,于是一狠心,查了查资料,用了两天时间写了一个.
刚开始查的资料,在线编辑器的原理大概如下:
一、基于textarea 特点:简单,但是表情只能通过ubb进行控制,不能所见即所得
二、基于div 特点:简单,所见即所得,比较复杂,但是兼容性不好,js不易控制.
三、基于iframe,具有以上两者的优点,没有以上两者的缺点
那就用第三种了.
附件中是实现的东西,本人js面向对象这块不是很熟悉,高人可以修改指点下,别忘了留言啊,可以的话给我也发一份:huqilong@126.com
整个编辑器就一个js文件,大概不到200行js代码吧,如果需要 加粗、图片等功能,只要看下里面的另外一个文件即可。
特点:实现了“开心网”编辑器所有功能
代码量极少:101行js代码 js+css总共4k
引用简单:两句代码搞定
支持一个页面多个文本框应用
面向对象的js封装
简洁,无多余功能
扩展简单:想要其他功能可以很easy地添加
支持IE6、firefox、iE7
如图:
最近做社区,产品认准了开心网的编辑器,但是那个笔记其用到prototype框架,而我们使用的jquery-1.2.2.js,两者有冲突,于是一狠心,查了查资料,用了两天时间写了一个.
刚开始查的资料,在线编辑器的原理大概如下:
一、基于textarea 特点:简单,但是表情只能通过ubb进行控制,不能所见即所得
二、基于div 特点:简单,所见即所得,比较复杂,但是兼容性不好,js不易控制.
三、基于iframe,具有以上两者的优点,没有以上两者的缺点
那就用第三种了.
附件中是实现的东西,本人js面向对象这块不是很熟悉,高人可以修改指点下,别忘了留言啊,可以的话给我也发一份:huqilong@126.com
整个编辑器就一个js文件,大概不到200行js代码吧,如果需要 加粗、图片等功能,只要看下里面的另外一个文件即可。
特点:实现了“开心网”编辑器所有功能
代码量极少:101行js代码 js+css总共4k
引用简单:两句代码搞定
支持一个页面多个文本框应用
面向对象的js封装
简洁,无多余功能
扩展简单:想要其他功能可以很easy地添加
支持IE6、firefox、iE7
如图:

转载于:https://blog.51cto.com/huqilong/115479