UBB.zip_textareahtml_ubb资源-CSDN文库

共17个文件

gif：15个

asp：1个

html：1个

版权申诉

114 浏览量 2022-09-14 19:33:52 上传评论收藏 26KB ZIP 举报

在网页设计中，有时我们需要创建一个可编辑的区域，让用户能够输入文本并插入图片，而`<textarea>`标签是HTML中用于创建多行文本输入的标准元素。然而，`<textarea>`本身并不支持富文本编辑，比如插入图片。在这种情况下，我们可以使用`div`模拟`textarea`，并结合UBB（Ultimate Bulletin Board）代码来实现类似的功能。 UBB是一种论坛常用的标记语言，它允许用户通过简单的符号插入特殊格式，如 `[img]` 用来插入图片。在HTML中，我们可以通过JavaScript或jQuery等库来解析和渲染这些UBB代码，使用户看到他们输入的UBB代码转化为实际的图片或其他富文本效果。创建一个`div`元素来代替`textarea`，并赋予它可编辑的属性，例如 `contenteditable="true"`： ```html <div id="ubbEditor" contenteditable="true"></div> ``` 接下来，我们需要编写JavaScript代码来处理用户的输入和UBB代码的解析。当用户在`div`中输入`[img]`代码时，我们可以监听`input`或`keydown`事件，然后将`[img]`替换为实际的图片标签 `<img>`： ```javascript document.getElementById('ubbEditor').addEventListener('input', function(e) { var text = e.target.innerText; var imgRegex = /\[img\](.*?)\[\/img\]/g; var newText = text.replace(imgRegex, function(match, url) { return '<img src="' + url + '" alt="">'; }); e.target.innerHTML = newText; }); ``` 这段代码会查找所有UBB图片代码，并将其替换为对应的`<img>`标签。注意，为了防止XSS攻击，你需要确保对用户输入的URL进行安全检查和转义。此外，为了让用户更方便地插入图片，我们可以添加一个按钮，点击后弹出文件选择框，让用户选择本地图片并上传到服务器。然后，将返回的图片URL插入到编辑器中： ```html <button id="insertImg">插入图片</button> ``` ```javascript document.getElementById('insertImg').addEventListener('click', function() { var input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function() { var file = this.files[0]; // 使用FileReader API读取图片，然后上传到服务器 // ... // 上传成功后，将返回的URL插入编辑器 var url = '服务器返回的图片URL'; document.getElementById('ubbEditor').innerHTML += '[img]' + url + '[/img]'; }; input.click(); }); ``` 以上就是使用`div`模拟`textarea`并实现UBB图片插入的基本流程。你可以根据需求进一步优化，例如添加图片上传功能、处理其他UBB代码（如字体、颜色等）、添加错误处理和用户体验改进等。通过这种方式，我们可以创建一个功能强大的富文本编辑器，同时避免了使用`<textarea>`的局限性。

资源推荐

资源详情

资源评论

收起资源包目录

UBB.zip （17个子文件）

UBB

1.asp 41B

index.html 3KB

zhuangtai

10U0193202.gif 3KB

10U01921G4.gif 2KB

10U01bS3.gif 3KB

10U01a127.gif 3KB

10U01946115.gif 3KB

10U01aH12.gif 3KB

10U01b5G0.gif 3KB

10U01bO5.gif 3KB

10U01c029.gif 3KB

10U0195536.gif 3KB

10U01960113.gif 3KB

10U01cM1.gif 3KB

10U0193a11.gif 3KB

10U0195L8.gif 4KB

10U0196434.gif 2KB

<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" 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>

评论收藏

内容反馈

版权申诉