HTML在线编辑器原理


 
一、首先来看一个例子：
 
[html] 
<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!</DIV>  
这个DIV就变成可以编辑的了。
 
类似的，SPAN，FONT等都可以有 contenteditable="true"   这个属性。
 
再试试下面的：
 
[html] 
<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!  
    <IMG src=/2013/0111/20130111011516236.jpg" />  
</DIV>  
我们就可以拉伸图片了。
 
二、具体实现：
 
     1、需要两个页面，blank.html editor.html
 
     2、blank.html 作为 editor.html的一个内嵌Frame，作为编辑框。
 
[html] 
<html>  
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">  
   <div id="RTC" contenteditable = true></div>  
</body>  
</html>  
 
     3、editor.html 主要是一些Javascript，用来处理不同的命令。
 
[html] 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<META NAME="Generator" CONTENT="EditPlus">  
<META NAME="Author" CONTENT="">  
<META NAME="Keywords" CONTENT="">  
<META NAME="Description" CONTENT="">  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
var contentHTML;  
function exeCommand(command, value)  
{  
   document.execCommand(command, false, value);  
}  
  
// 加粗  
function Black()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('Bold', '');  
}  
  
// 斜体  
function Italic()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('Italic', '');  
}  
  
// 下划线  
function UnderLine()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('Underline', '');  
}  
  
// 向里缩进  
function Indent()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('Indent', '');  
}  
  
// 向外缩进  
function Outdent()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('Outdent', '');  
}  
  
// 无序列表  
function UnorderList()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('InsertUnorderedList', '');  
}  
  
// 有序列表  
function OrderList()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   exeCommand('InsertOrderedList', '');  
}  
  
// 插入图片  
function Image()  
{  
   var obj = frames['ifRTC'].RTC;  
   obj.focus();  
   ImagePath = window.prompt('请输入图片路径：', '');  
   exeCommand('InsertImage', ImagePath);  
}  
  
// 预览效果  
function Preview()  
{  
   var htmlContent = frames['ifRTC'].RTC.innerHTML;  
   var open = window.open('');  
   open.document.write(htmlContent);  
}  
  
// 查看编辑框里的HTML源代码  
function Source()  
{  
   var htmlContent = frames['ifRTC'].RTC.innerHTML;  
   if (document.all.iframeDiv.style.display == 'block')  
   {  
     document.all.iframeDiv.style.display = 'none';  
     document.all.htmlText.value = htmlContent;  
     document.all.textDiv.style.display = 'block';  
     document.all.htmlText.focus();  
     document.all.Source.value='HTML';  
   }  
   else  
   {  
     document.all.iframeDiv.style.display = 'block';  
     document.all.textDiv.style.display = 'none';  
     frames['ifRTC'].RTC.innerHTML = document.all.htmlText.value;  
     frames['ifRTC'].RTC.focus();  
     document.all.Source.value=' 源代码 ';  
   }  
}  
  
// 增加编辑框的高度  
function Add()  
{  
   document.all.ifRTC.height = document.all.ifRTC.height*1 + 50;  
}  
//-->  
</SCRIPT>  
</HEAD>  
  
<BODY>  
<TABLE width="400"border="0">  
<TR>  
<TD><input type="button" value="B" name="Black" onclick="Black()" /></TD>  
<TD><input type="button" value="I" name="Italic" onclick="Italic()" /></TD>  
<TD><input type="button" value="U" name="UnderLine" onclick="UnderLine()" /></TD>  
   <TD><input type="button" value="UL" name="UnorderList" onclick="UnorderList()" /></TD>  
   <TD><input type="button" value="OL" name="OrderList" onclick="OrderList()" /></TD>  
<TD><

补充：web前端 , HTML/CSS  ,