在WEB中实现Word的功能，很简单的。

greystar 2003-05-19 08:00:29

下面用了一个页面，一个htc文件。就可以做到word的效果了，用的是document.execCommand("")方法。最终只要把取到的值放到数据库里就可以了。

word.htc

<public:component tagName=editBox>
<public:defaults viewLinkContent/>
</public:component>

<div unselectable="on" align=center style="height:250; width:425; background-color:powderblue; border:outset powderblue">
<br>
<div id=foo contenteditable align=left
style="height:200; width:370;background-color:white; font-face:Arial; padding:3;
border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">
</div>
<br>

<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="粗体">
<B>B</B></button>
<button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="斜体">
<B><I>I</I></B></button>
<button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'
style="background-color:powderblue; border-color:powderblue;" title="下划线">
<B><U>U</U></B></button>
<button unselectable="On" onclick='document.execCommand("StrikeThrough");foo.focus();'
style="background-color:powderblue; border-color:powderblue; text-decoration=line-through"
title="删除线">
<B>S</B></button>


<button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="上标">
<B>^</B></button>
<button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="下标">
<B>_</B></button>


<button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="数字列表">
<B>OL</B></button>
<button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="非数字列表">
<B>UL</B></button>
<button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="缩进">
<B><<</B></button>
<button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="后退">
<B>>></B></button>


<button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="左对齐">
<B>|<</B></button>
<button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="右对齐">
<B>>|</B></button>
<button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="居中">
<B>>|<</B></button>

<br>

<button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>剪切</B></button>
<button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>复制</B></button>
<button unselectable="On" onclick='document.execCommand("Paste")'
style="background-color:powderblue; border-color:powderblue"><B>粘贴</B></button>


<button unselectable="On" onclick='alert(foo.innerHTML);foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>得到值</B></button>
</div>

word.htm
<html xmlns:x>
<head>
<?import namespace=x implementation="word.htc" />
</head>
<body>
<x:editbox>
</body>
</html>

...全文