高分求asp.net中类似于qq添加表情的js实现方法
我在做一个论坛,有一个发表论坛内容的输入框,同时在页面预置了许多的表情头像,当点击头像时我想在输入框中添加该头像到光标处,可是不知用javascript如何来具体实现,希望javascript高手帮忙解决··最好有具体的js代码,并带注释,本人新手。
------解决方案--------------------
参考
http://www.cnblogs.com/Tmouse/articles/130682.html
http://topic.csdn.net/u/20070918/13/30213ad4-c09b-4fe9-9cf1-3e5769974577.html
http://www.cnblogs.com/sjcatsoft/archive/2008/12/20/1358993.html
------解决方案--------------------
可以这样
在a.asx前台定义QQ表情图片,作为弹出框。
<td>
<img src="face/em1.gif" border=0 onclick="insertsmilie('[em1]')" style="CURSOR: hand">
<img src="face/em2.gif" border=0 onclick="insertsmilie('[em2]')" style="CURSOR: hand">
</td>
在b.aspx中调用a.aspx,利用js方法insertsmilie获值
<td>
<asp:Panel id="Panel2" runat="server"> <!--#include file="a.aspx"--> </asp:Panel>
</td>
<td align="center" width="540px" >
<asp:textbox id="Content" runat="server" Width="500px" Height="200px" TextMode="MultiLine" CssClass="input"></asp:textbox>
</td>
function insertsmilie(smilieface)
{
document.form1.Content.value+=smilieface;
}
显示时利用方法来显示图片
后台
public string Replace(string content)
{
for (int i = 1; i < 60; i++)
content = content.Replace("[em" + i + "]", "<IMG SRC=\"face/em" + i + ".gif\">");
return content;
}
前台调用,Content为数据库字段
<%# Replace(Server.HtmlEncode(DataBinder.Eval("Content").ToString())) %>
------解决方案--------------------
http://download.csdn.net/source/771375
这个简易的编辑器,告诉你js实现在线编辑的基本方法。
------解决方案--------------------
js获得文本框光标位置,插入就行了啊
JScript code
function getCursorPos(obj){
var rngSel = document.selection.createRange();//建立选择域
var rngTxt = obj.createTextRange();//建立文本域
var flag = rngSel.getBookmark();//用选择域建立书签
rngTxt.collapse();//瓦解文本域到开始位,以便使标志位移动
rngTxt.moveToBookmark(flag);//使文本域移动到书签位
rngTxt.moveStart('character',-obj.value.length);//获得文本域左侧文本
str = rngTxt.text.replace(/\r\n/g,'');//替换回车换行符
return(str.length);//返回文本域文本长度
}
------解决方案--------------------
一般来说用编辑器自带的表情或替换编辑器表情目录里的表情来实现。
如果确定要这么做的话,可能麻烦多一点。
HTML code
<!--在head之间引入jquery包-->
<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<!--表情图片-->
<img class='face' src='1.gif'/>
<a class='face'><img width='20px' height='20px' src='1.gif'/></a>
<a class='face'><img width='20px' height='20px' src='2.gif'/></a>
<a class='face'><img width='20px' height='20px' src='3.gif'/></a>
<a class='face'><img width='20px' height='20px' src='4.gif'/></a>
<!--假定这个是编辑器-->
<input type='input' id='content' />