平顶山互联网行业的皇冠!

平顶山天虹科技是专业从事平顶山网站建设 网站制作 网站推广的超级网络公司,为您提供专业的网络营销解决方案!

CEO手机: 15993534153 QQ:29429666  点击QQ号直接交流或留言

平顶山五星级网络营销服务商!                                                                                                                                                          留言反馈 | 进入平面印刷

网站建设

平顶山天虹科技有限公司代理中国万网及58同城网,金牌品质,专业服务!
 
HTML在线编辑器的原理  
 

 

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正好满足了这个需要。


看了现在网上流行的在线编辑器,也忍不住想了解一下原理。下了目前应用最广泛的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 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

HTML在线编辑器实现原理(兼容IE和FireFox)

首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。


<IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>

 

并且在加上javascript代码来指定HtmlEdit有编辑功能:


<script language="javascript">
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;

//只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;

//但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();

//字体特效 - 加粗方法一
function addBold()
{
editor.focus();
//所有字体特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字体特效 - 加粗方法二
function addBold()
{
editor.focus();
//获得选取的焦点
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}

</script>

 


WEB在线编辑器原理

从eWebEditor到 FCKeditor现在有很多很多的在线编辑器了,功能都很强,很多,但是其基本原理却都很简单

我发现的编辑器主要有3大类,我总结下,把各自的优缺点都写下

直接用textarea 标签
优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得
缺点:不直观,功能非常少

用 DIV或者TABLE的CONTENTEDITABLE 标签,属性来让一个区域可以编辑
优点:可以很直观,可以做各种效果
缺点:此标签在mozilla下不可用,只适合IE浏览器,且对js要求高

用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑
优点:具有上面第二条的全部优点,并且还多浏览器比如FF等支持
缺点:对js要求高

下面是第三点的一个简单例子代码

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]


 上一条:新创业平台-李开复离职谷歌全力投入“创新工场”!       下一条:如何解决DIV层被Flash动画遮盖问题

【公司简介】

    平顶山天虹科技网络公司,致力于面向营销的企业网站建设网站开发网页设计网站解决方案。采用PHP JSP ASP.NET等平台开发程序,利用DIY+CSS现代化WEB3.0制作技术搭建网页框架,优秀的网站定位、网站策划和网站制作,不仅可以提升企业网站的性价比,更可让企业在网站建设起步时就领先于对手。天虹科技以精深技术为核心、以专业团队为支撑,为平顶山政府网站建设平顶山公司网站建设平顶山学校网站建设等提供高技术含量的平顶山网站建设服务。

 

    天虹科技始终以不懈的努力、更高的目标来要求自己。凭借多年的平顶山网站建设成功经验,天虹科技已拥有数百例经典网站成功案例,是一家正规专业的平顶山网络公司

 

    天虹科技五星级专业服务商拥有强大的平顶山网页制作技术团队,在网站建设网站设计网站推广软件开发等高科技领域始终保持领先地位,并获得了网络公司业界的广泛赞誉和认同!天虹科技重视网站建设质量,打造平顶山地区网站建设公司知名品牌,以优秀的网站设计技术,创一流的平顶山网站建设作品。建网站找天虹,助您马到成功!

 

    本月特惠:天虹建站普及优惠活动进行中!本月前三名客户朋友与我们合作网站建设,送国际顶级域名和1G(1000M)网络空间!如果您想抢占网络先机,快速行动,机会难得!点击这里给天虹科技网站建设发消息!

 

天虹科技24小时网站建设服务热线:15237500186

  平顶山天虹科技有限公司专业网站建设

Copyright © 2017 www.Pdsit.com Inc. All Rights Reserved. 平顶山网站建设联盟 版权所有
[电话]15993534153 [地址] 平顶山市新华路与矿工路交汇处天意花园8层
业务咨询、合作洽谈、求职招聘[客服QQ] 29429666点击这里给天虹科技网站建设发消息! [信箱] chinalhg@qq.com
如何找到本站?在百度搜索关键词:平顶山网站建设平顶山网站推广平顶山网站设计平顶山网站优化平顶山网络公司平顶山网站联盟。百度快照均排名第一!
平顶山市天虹科技是平顶山优秀专业的建站第一品牌!
国家信息产业部备案:豫ICP备11012270号-1