投递文章投递文章 投稿指南 RSS订阅RSS订阅

textarea属性使用指南,在textarea里显示图片

来源:互联网 发布时间:2007-10-20 收藏 投稿 字体:【

很多网站后台添加新闻功能模块中textarea里面可以显示图片,点一下图片,图片周围就出现调整大小的小方框,请问如何实现啊.
其实我是想做个简单的图文混排的html在线编辑器.
请各位高手给点思路.谢谢

这个不是textarea做的

下一个就可以了,其实不用什么都DIY的。。
想想嘛,自己做要做很久,而拿别人的,直接就可以用。。

当然,不是说原创不好,只是,多花点时间在实用的地方上。。

对了,好象记得有个编辑器叫eWebeditor

我就是想知道一下原理.以后工作中如果遇到相应问题也知道怎么办

在TEXTAREA中显示表格以及图像

不很实用,不过比较新奇,呵呵。。

<textarea name="t" rows="20" cols="50"></textarea>
<script language="JavaScript">
var oTable = document.createElement("TABLE");
var oTBody = document.createElement("TBODY");
var oTR = document.createElement("TR");
var oTD = document.createElement("TD");
字串1

oTD.innerText = '无忧脚本';
oTR.appendChild(oTD);
oTBody.appendChild(oTR);
oTable.border = 1;
oTable.appendChild(oTBody);
t.appendChild(oTable);
</script>

运行代码 拷贝代码 保存代码 [可先修改部分代码再运行;请先检查代码确定安全]

<textarea id="test" rows="20" cols="50"></textarea>
<Script Language="JavaScript">
var oImg=document.createElement("IMG");
oImg.src="http://www.2yup.com/asp/images/asp_logo1.gif";
test.appendChild(oImg);
</Script>

运行代码 拷贝代码 保存代码 [可先修改部分代码再运行;请先检查代码确定安全]


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
字串1


</head>

<body>
<form name="form1">
<textarea name="t" rows="20" cols="50"></textarea>
<table id=otd border=1 cellspacing=1 width=68%><tr><td width=50%>11</td><td width=50%>12</td></tr><tr><td width=50%>21</td><td width=50%>22</td></tr></table>
<script language="JavaScript">
document.form1.t.appendChild(otd);
</script>
</form>
</body>

</html>

运行代码 拷贝代码 保存代码 [可先修改部分代码再运行;请先检查代码确定安全]


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
字串5


<title>New Page 1</title>
</head>

<body>
<form name="form1">
<textarea name="t" rows="20" cols="50"></textarea>
<script language="JavaScript">
var oTable = document.createElement("TABLE");
var oTBody = document.createElement("TBODY");
var oTR = document.createElement("TR");
var oTD = document.createElement("TD");
var str='<table border=1 cellspacing=1 width=68%><tr><td width=50%>11</td><td width=50%>12</td></tr><tr><td width=50%>21</td><td width=50%>22</td></tr></table>';
var otd=document.createElement(str);
oTD.innerHTML= str;
oTR.appendChild(oTD);
oTBody.appendChild(oTR);
oTable.border = 1;
oTable.appendChild(oTBody);
form1.t.appendChild(oTable);
</script>
</form> 字串4
</body>

</html>

运行代码 拷贝代码 保存代码 [可先修改部分代码再运行;请先检查代码确定安全]

--------------------------------------------------------------------------------
这是我见到的一篇资料,希望对你有帮助

哪里下载的?

原理很简单
<textarea id="xxx"><textarea>

<script>
var obj_img=document.createElement("img");
obj_img.src="/xxx.jpg";
document.getElementById('xxx').appendChild(obj_img);
</script>

<textarea id="xxx"></textarea>

<script>
var obj_img=document.createElement("img");
obj_img.src="/xxx.jpg";
document.getElementById('xxx').appendChild(obj_img);
</script>

顶一下
(5)
71.4%
踩一下
(2)
28.6%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见