利用层模拟在textarea中插入图片

最近一个客户要求这个功能----在textarea中插入图片，用来模仿UBB代码，但又不同于UBB，原因是UBB点击某个图片的时候，在textarea中插入的是一些特殊的字符，而他要求的是将图片插入到textarea中。
太难实现了，原因是textarea中只允许插入文字，不允许插入图片，找了很长时间，最终还是没有找到，最后只能改用其他方法模拟。
找了很久，找到div有一个属性 
contenteditable，当这个属性为true时，此层可编辑；当这个属性为false时，层不可编辑。
当层可编辑的时候，就像textarea了，但是，当输入的文字的行数多的时候，层会自动加高，这样给这个层加上 
overflow:auto
属性就可以了。

以下是我的代码，与大家共享
index.html
<
html xmlns="http://www.w3.org/1999/xhtml" >

<
head runat="server">

<
title>
利用层模拟在textarea表单中插入图片<
/title>

<
script language="javascript" type="text/javascript">

/*
 
功能：利用层实现在textarea中插入图片
 
开发：wangsdong
 
来源：www.aspprogram.cn
 
原创作品，转裁请保存此信息
*/
 
 
 
var pos

 
 
 
function getPos()
 
 
 

{
 
 
 
 
 
 
 
pos = document.selection.createRange()

 
 
 
}

 
 
 
function fun(str)
 
 
 

{ 
 
 
 

 
 
 
 
 
 
 
if(pos!=null)
 
 
 
 
 
 
 

{
 
 
 
 
 
 
 
 
 
 
// pos.text="插入文字内容"

 
 
 
 
 
 
 
 
 
 
 
pos.pasteHTML("<
img src=\""+str+"\">
")

 
 
 
 
 
 
 
 
 
 
 
//pos.pasteHTML("<
br/>
文本框控件:<
input id='Text1' type='text' />
")

 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
//释放位置
 
 
 
 
 
 
 
 
 
 
 
pos=null

 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
else
 
 
 
 
 
 
 

{
 
 
 
 
 
 
 
 
 
 
 
alert("没有正确选择位置")

 
 
 
 
 
 
 
} 
 
 
 
 
 
 

 
 
 
}

<
/script>

<
/head>

<
body>

<
form name="form1" method="post" action="1.asp" >

<
div style="width:350px
">

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01a127.gif" width="40" height="40" class="img1" style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01aH12.gif" width="40" height="40" class="img1" style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01b5G0.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01bO5.gif" width="40" height="40" class="img1" style="cursor:hand
" />

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01bS3.gif" width="40" height="40" class="img1" style="cursor:hand
" />

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01c029.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01cM1.gif" width="40" height="40" class="img1" style="cursor:hand
" />

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U0193a11.gif" width="40" height="40" class="img1" style="cursor:hand
" />

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U0195L8.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01921G4.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U0193202.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U0195536.gif" width="40" height="40" class="img1" style="cursor:hand
" />

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U0196434.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01946115.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
img src="http://www.aspbc.com/Index/showtech/id/zhuangtai/10U01960113.gif" width="40" height="40" class="img1" 
style="cursor:hand
"/>

 
<
/div>

 

 
 
 
 
 
 
 
<
div id="myDiv" style="width: 300px
height: 100px
border: black 1px solid
font-size:small
line-height:1
overflow:auto
"
 
 
 
 
 
 
 
 
 
 
 
onkeyup="getPos()
" 
contenteditable="true">

 
 
 
 
 
 
 
 
 
abcdefg<
/div>

 
 
<
div>

 
 
<
input type="hidden" value="" name="content" id="content">

 
 
<
input type="submit" value="提交" name="submit">

 
 
<
/div>

<
/form>

<
/body>

<
/html>

源码下载地址：http://www.K88.NET/code/showcode.asp?id=73