[转] 使用JAVAScript 编写的HTML在线编辑器

[转] 使用JAVAScript 编写的HTML在线编辑器

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 >
</ body >
</ html >

    3、editor.html 主要是一些Javascript，用来处理不同的命令。

 

<! 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 >< input  type ="button"  value ="左"  name ="Outdent"  onclick ="Outdent()"  /></ TD >
  < TD >< input  type ="button"  value ="右"  name ="Indent"  onclick ="Indent()"  /></ TD >
  < TD >< input  type ="button"  value ="图"  name ="Image"  onclick ="Image()"  /></ TD >
</ TR >
</ TABLE >
< div  id ="iframeDiv"  style ="display:block" >
< iframe  id ="ifRTC"  width ="400"  height ="200"  border ="1"  src ="blank.html"  ></ iframe >
</ div >
< div  id ="textDiv"  style ="display:none" >
   < textarea  id ="htmlText"  cols ="50"  rows ="10" ></ textarea >
</ div >
< br >
< input  type ="button"  value =" + "  name ="Add"  onclick ="Add()"  /> &nbsp;&nbsp;
< input  type ="button"  value =" 预  览 "  name ="Preview"  onclick ="Preview()"  /> &nbsp;&nbsp;
< input  type ="button"  value =" 源代码 "  name ="Source"  onclick ="Source()"  />
</ BODY >
</ HTML >

三、后记：

这里写的只是一个简单的编辑器，其实重要的就是：

contenteditable="true"

和

document.execCommand(command, false, value);

关于 document 的一些方法，可以查看MS的文档。

execCommand 的一些命令也可以在文档里找到，下面列出一些：

execCommand(command, false, value); 中的 command 可以是以下这些：

BackColor	Sets or retrieves the background color of the current selection.
Bold	Toggles the current selection between bold and nonbold.
ClearAutocompleteForForms	Clears saved forms data.
Copy	Copies the current selection to the clipboard.
CreateBookmark	Retrieves the name of a bookmark anchor or creates a bookmark anchor for the current selection or insertion point.
CreateLink	Retrieves the URL of a hyperlink or creates a hyperlink on the current selection.
Cut	Copies the current selection to the clipboard and then deletes it.
Delete	Deletes the current selection.
FontName	Sets or retrieves the font for the current selection.
FontSize	Sets or retrieves the font size for the current selection.
ForeColor	Sets or retrieves the foreground (text) color of the current selection.
FormatBlock	Sets or retrieves the current block format tag.
Indent	Increases the indent of the selected text by one indentation increment.
InsertButton	Overwrites a button control on the current selection.
InsertFieldset	Overwrites a box on the current selection.
InsertHorizontalRule	Overwrites a horizontal line on the current selection.
InsertIFrame	Overwrites an inline frame on the current selection.
InsertImage	Overwrites an image on the current selection.
InsertInputButton	Overwrites a button control on the current selection.
InsertInputCheckbox	Overwrites a check box control on the current selection.
InsertInputFileUpload	Overwrites a file upload control on the current selection.
InsertInputHidden	Inserts a hidden control on the current selection.
InsertInputImage	Overwrites an image control on the current selection.
InsertInputPassword	Overwrites a password control on the current selection.
InsertInputRadio	Overwrites a radio control on the current selection.
InsertInputReset	Overwrites a reset control on the current selection.
InsertInputSubmit	Overwrites a submit control on the current selection.
InsertInputText	Overwrites a text control on the current selection.
InsertMarquee	Overwrites an empty marquee on the current selection.
InsertOrderedList	Toggles the current selection between an ordered list and a normal format block.
InsertParagraph	Overwrites a line break on the current selection.
InsertSelectDropdown	Overwrites a drop-down selection control on the current selection.
InsertSelectListbox	Overwrites a list box selection control on the current selection.
InsertTextArea	Overwrites a multiline text input control on the current selection.
InsertUnorderedList	Toggles the current selection between an ordered list and a normal format block.
Italic	Toggles the current selection between italic and nonitalic.
JustifyCenter	Centers the format block in which the current selection is located.
JustifyLeft	Left-justifies the format block in which the current selection is located.
JustifyRight	Right-justifies the format block in which the current selection is located.
Outdent	Decreases by one increment the indentation of the format block in which the current selection is located.
OverWrite	Toggles the text-entry mode between insert and overwrite.
Paste	Overwrites the contents of the clipboard on the current selection.
Refresh	Refreshes the current document.
RemoveFormat	Removes the formatting tags from the current selection.
SelectAll	Selects the entire document.
SaveAs	Saves the current Web page to a file.
UnBookmark	Removes any bookmark from the current selection.
Underline	Toggles the current selection between underlined and not underlined.
Unlink	Removes any hyperlink from the current selection.
Unselect	Clears the current selection.