用Javascript 编写 HTML在线编辑器

原创 2006年05月19日 15:09:00

以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现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>
</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.

 

有什么问题可以留言,谢谢!
邮箱: comstep@Gmail.com

 

用Javascript 编写 HTML在线编辑器

以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法。document.execCommand(command, false, value);才知道具体...
  • superes
  • superes
  • 2007年12月19日 15:08
  • 426

用JAVA编写HTML在线编辑器

以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法。document.execCommand(command, false, value);才知道具体...
  • huang2005
  • huang2005
  • 2006年07月20日 08:14
  • 2292

eWebSoft在线 HTML 编辑器的使用说明

 http://www.sunmood.com/bbs/non-cgi/editor/editor.html eWebEditor是的基于网页的、所见即所得的在线HTML编辑器。她能够在网页上实现许多...
  • rcyl2003
  • rcyl2003
  • 2007年04月30日 13:57
  • 1867

HTML在线编辑器原理

以前也用过HTML在线编辑器,但是一直不太清楚是怎么回事,今天在网上找了一下终于知道是怎么一回事了。 示例下载地址:http://download.csdn.net/detail/qm4050/...
  • qm4050
  • qm4050
  • 2013年01月10日 15:39
  • 5027

让你的eclipse实现写JAVA代码,HTML,CSS,JAVASCRIPT代码提示

1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist   修改Auto Activation triggers for java的值为...
  • SoulsCarrier
  • SoulsCarrier
  • 2015年03月15日 16:23
  • 2765

用JavaScript实现简单的计算器

html lang="en"> head> meta charset="UTF-8"> title>计算器title> link rel="stylesheet" type="...
  • baidu_25845567
  • baidu_25845567
  • 2016年06月09日 15:33
  • 514

Javascript实验编写三个html页面,实现”实验三效果

主页面代码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...
  • qq_33609401
  • qq_33609401
  • 2016年11月11日 21:31
  • 634

javascript实现HTML在线编辑器

javascript实现HTML在线编辑器   以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法。document.execCommand...
  • fengfan2008vip
  • fengfan2008vip
  • 2008年12月17日 10:21
  • 1514

JS在线编程

1、[编程题] 优雅的点 小易有一个圆心在坐标原点的圆,小易知道圆的半径的平方。小易认为在圆上的点而且横纵坐标都是整数的点是优雅的,小易现在想寻找一个算法计算出优雅的点的个数,请你来帮帮他。 例如:半...
  • LiyangBai
  • LiyangBai
  • 2017年08月13日 10:13
  • 303

django-在线HTML编辑器用哪个?

主要有Fckeditor,http://www.fckeditor.net/,老牌,东西很多Tinymce,http://tinymce.moxiecode.com/,老牌,比上面的小一点,文件也很多...
  • huyoo
  • huyoo
  • 2009年03月11日 18:59
  • 3378
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript 编写 HTML在线编辑器
举报原因:
原因补充:

(最多只允许输入30个字)