HTML在线编辑器的基本概念与相关资料第1/2页

所属分类: 网络编程 / JavaScript 阅读数: 364
收藏 0 赞 0 分享
1,什么是HTML在线编辑器
顾名思义,在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档。
2,HTML在线编辑器有什么用?
因为HTML在线编辑器可用于在线编辑基于HTML的文档,所以,它经常被用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方。
3,什么是DHTML
DHTML是一些现有网页技术与标准的整合,通过它,网页设计可以用一种新的方式创建网页。
4,DHTML与HTML关系
DHTML是以HTML语言为基础,但是相较于以单纯的HTML来设计网页的方法,HTML所带来的最大转变,在于它加入了“对象化”的网页特征。动态HTML对象模型定义了用于描述网页及其内部元素的对象,每个对象都有描述其自身状态的属性和描述其行为的方法,它们也可以处理特定类型的事件,因此,网页设计者可以通过Script程序来控制或调用这些对象。
5,DHTML与HTML在线编辑器的关系
要做在线编辑器就需要用到DHTML,因为HTML在线编辑器要能在线地编辑,需要“动态”地改变网页对象的属性,而DHTML正好满足了这个需要。
HTML在线编辑器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021 
HTML在线编辑器的基本原理
转载自:http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692 
看了现在网上流行的在线编辑器,也忍不住想了解一下原理。下了目前应用最广泛的eWebEdit,这个是我见到的最强的开源在线编辑器...研究了一天,终于知道了核心原理。
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持。因为IE5.0以上版本有一个编辑状态,可以在一个iframe里面输入文字。然后通过 "document.body.innerHTML"可以获取iframe里面的html代码,这个就是关键。那怎么才能让ifrmae处于编辑状态呢,可以用:
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
函数实现。剩下的问题就是就是取得焦点和选中的值:
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
以上2句可以获取选中的值的html代码。
到了这里,基本原理搞清楚了,然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个textarea来或得iframe里的html值,实际情况,可以将textarea的display设置成false,然后就可以将iframe的内容提交了。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多