用 Javascript 编写 HTML 在线编辑器
在线编辑器主要有 3 大类:1.直接用 textarea 标签
优点:速度快,提交方便,可以用 UBB 标签来弥补不能所见所得
缺点:不直观,功能非常少
2.用 DIV 或者 TABLE 的 CONTENTEDITABLE 标签,属性来让一个区域可以编辑
优点:可以很直观,可以做各种效果
缺点:此标签在 mozilla 下不可用,只适合 IE 浏览器,且对 js 要求高
3.用 iframe 或者 frame 的中的 document 的 document.designMode ="On" 来实现可编辑
优点:具有上面第二条的全部优点,并且还多浏览器比如 FF 等支持
缺点:对 js 要求高.
以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现 document
对象的一个方法。
document.execCommand(command, false, value);
才知道具体原理。
一、首先来看一个例子:
<DIV)contenteditable="true")style="border:dashed blue 2px">Hello World!</DIV>
保存为 html 网页,打开看看,在 DIV 里出现了一个光标,这个 DIV 就变成可以编辑的了。
类似的,SPAN,FONT 等都可以有 contenteditable="true")这个属性。
再试试下面的:
<DIV)contenteditable="true")style="border:dashed blue 2px">Hello World!
))))<IMG)src="http://p.blog.csdn.net/images/p_blog_csdn_net/comstep/70786/o_logo.jpg")
/>
</DIV>
我们就可以拉伸图片了。
二、具体实现:
))) 1、需要两个页面,blank.html editor.html
))) 2、blank.html 作为 editor.html 的一个内嵌 Frame,作为编辑框。
<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
<div id="RTC" contenteditable = true></div>