js 利用层实现在textarea中插入图片

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>利用层实现在textarea表单中插入图片</title>
<script language="javascript教程" type="text/javascript">
/*
 功能:利用层实现在textarea中插入图片
 开发:wangsdong
 来源:.net教程">www.111cn.net
 原创作品,转裁请保存此信息
*/
    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("www.111cn.net提示你:没有正确选择位置");
        }       
    }

</script>
</head>
<body>
<form name="form1" method="post" action="1.asp教程" onsubmit="document.getElementById('content').value=document.getElementById('myDiv').innerHTML">
<div style="width:350px;">
 <img src="zhuangtai/10U01a127.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01aH12.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01b5G0.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01bO5.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U01bS3.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U01c029.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01cM1.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0193a11.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0195L8.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01921G4.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U0193202.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U0195536.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0196434.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01946115.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01960113.gif" width="40" height="40" class="img1"  onClick="fun(this.src);" style="cursor:hand;"/>
 </div>
 
        <div id="myDiv" style="width: 300px; height: 100px; border: black 1px solid; font-size:small; line-height:1; overflow:auto;"
          onclick="getPos();"   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>

时间: 2024-11-08 21:38:17

js 利用层实现在textarea中插入图片的相关文章

请假超级高手,我利用c# opemxml向word中插入图片为什么不成功

问题描述 publicstaticvoidInsertAPicture(stringdocument,stringfileName){using(WordprocessingDocumentwordprocessingDocument=WordprocessingDocument.Open(document,true)){MainDocumentPartmainPart=wordprocessingDocument.MainDocumentPart;ImagePartimagePart=main

怎样利用Excel2013截图工具在文档中插入图片

将屏幕截图插入到Excel2013中的方法很多,很多人肯定都是用QQ截图将图片截取下来,然后再将图片插入进去.其实我们要来介绍的是一种更加简单快速的方法. ①启动Excel2013,单击菜单栏--插入--插图--屏幕截图. 文档中插入图片-如何利用画图工具截图"> ②然后在下拉菜单中选择屏幕剪辑. ③这时会自动跳转到桌面,我们开始截图. ④截取完毕,图片自动插入到Excel2013中了.而且相比QQ截图,这样截图不会改变原有图片的像素.         注:更多精彩教程请关注三联电脑教程栏

利用epplus在EXCEL中插入图片如何让其不随单元格变化而变化

问题描述 我在,NET程序中运用epplus向excel中插入图片,但图片所在行的单元格的高度发生变化,比如单元格变高了,那么刚插入图片也会被撑大.如果运用Office的API做的话,会有个属性设置,能让图片不随单元格的变化而改变大小,但是epplus中没有类似的属性设置,请问各位技术大拿,如何解决此类问题?谢谢! 解决方案 解决方案二:那个epplus怎么样加坐标轴标题?

像素图-html5在canvas中插入图片

问题描述 html5在canvas中插入图片 在canvas中显示图片非常简单.可以通过修正层为图片添加印章.拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点.用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容. 不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作.浏览器通常会在页面脚本执行的同时异步加载图片.如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片.因此,开发人员

如何在Word 2013页眉或页脚中插入图片

Word2013文档的页眉或页脚不仅支持文本内容,还可以在其中插入图片.例如可以在页眉或页脚中插入公司的Logo.单位的徽标.个人的标识等图片,使Word文档更加正规.在Word2013文档页眉或页脚中插入图片的步骤如下所述: 第1步,打开Word2013文档窗口,切换到"插入"功能区.在"页眉和页脚"分组中单击页眉或页脚按钮(本例单击"页眉"按钮),并在打开的页眉面板中选择"编辑页眉"命令,如图2013072914所示. 图

如何在Word 2013文档中插入图片水印

通过在Word2013文档中插入图片自定义水印(例如将公司LOGO作为水印),可以使文档更加正式化,同时也是对Word文档版权的一种声明.在Word2013文档中插入图片自定义水印的步骤如下所述: 第1步,打开Word2013文档窗口,切换到"页面布局"功能区.在"页面背景"分组中单击"水印"按钮,并在打开的水印面板中选择"自定义水印"命令,如图2013072928所示. 图2013072928 选择"自定义水印&q

RDLC 报表系列(二) 报表中插入图片

一.写作前提 原本的计划把在RDLC报表中插入图片的内容放到后期来讲,但是看到顶贴的朋友们对此内容的需求,所以我改变原来计划,把此节内容 提前来讲,希望能及时的给予你帮助. 二.本文内容 1. 在RDLC报表中插入图片 2. 总结 三.在RDLC报表中插入图片 首先我要声明,此篇我们是在([原创] RDLC 报表系列(一) 创建一个报表)文章的基础上来讲,如果还不了解的可以先看这篇文章. 下面我们就来谈一下怎么加入图片到RDLC报表中. 1. 首先我们在项目文件中新建一个images文件夹,他用

在Word 2007文档中插入图片自定义水印

通过在Word2007文档中插入图片自定义水印(例如将公司LOGO作为水印),可以使文档更加正式化, 同时也是对Word文档版权的一种声明.在Word2007文档中插入图片自定义水印的步骤如下所述:第1步, 打开Word2007文档窗口,切换到"页面布局"功能区.在"页面背景"分组中单击"水印"按钮,并在打 开的水印面板中选择"自定义水印"命令,如图2008121705所示. 图2008121705 选择"自定义水印

isee中怎样在文章中插入图片

文章中插入图片-isee图片专家">            注:更多精彩教程请关注三联电脑教程栏目