老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 软件网络编程 > 文章正文

【网页编辑器开发】html在线网页编辑器开发第六讲,表情插入

2011/1/10 18:17:49
 

        如今的编辑器功能是越来越强大,也越来越人性化了,所以功能不嫌多,就怕不够用,我之所以写这一系列的教程也正是想把自己知道的一些知识分享出来,让大家能开发出自己的编辑器,以便灵活增加自己想要的功能,这样我们的编辑器就可繁可简了,在之前的几讲中,我们把简易的编辑器已经做出来了,今天本来想说一下上传图片功能来着,因为上传图片涉及到一些后台程序功能,每种语言都不太一样,前两天又有人留言咨询表情的问题,所以这一讲我们就暂时把插入表情的功能给讲述一下。

编辑器表情插入:表情按钮插入法

        为了方便用户我们经常会在编辑器的边上放置一些表情,让用户直接点击就可以放到编辑器里,这样就不需要再点击表情按钮打开表情窗口再插入表情了。

效果如图:

     这是我在tv150店主论坛里为店主做的编辑器,很多店主喜欢用淘宝的表情,所以我就在没有经过淘宝同意的情况下把他们的表情拿过来用了,下面我们来说一下如何把这个功能放到我们的编辑器里。

首先来看一下我们这个编辑器的改进效果图:

如此看来,我们的编辑器貌似是华丽了很多,先将html代码,加入到编辑器的下方:

#lt;table width="410" border="1" align="center"#gt;
  #lt;tr#gt;
    #lt;td colspan="5"#gt;#lt;strong#gt;表情#lt;/strong#gt;#lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/27.gif" style="cursor: pointer;" onclick="faceadd('27')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/70.gif" style="cursor: pointer;" onclick="faceadd('70')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/0.gif" style="cursor: pointer;" onclick="faceadd('0')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/84.gif" style="cursor: pointer;" onclick="faceadd('84')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/67.gif" style="cursor: pointer;" onclick="faceadd('67')"#gt;#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

这是一段html代码,相信大家都看得懂,我引用的是我tv150店主论坛上的表情图片,style="cursor:pointer;"的意思是鼠标放上去变成一个手形,以前一直用hand这个属性,后来发现火狐和谷歌浏览器不支持,所以就用这个了,后面的教程中我会把自己所了解的一些浏览器兼容问题简单说一些。

加入了上面的html代码以后,我们再加入js代码:

function faceadd(num)
{
 message.focus();
 var range =message.document.selection.createRange();
 var str1;
 str1="#lt;img src=\"http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/"+num+".gif\"/#gt;";
 range.pasteHTML(str1);

代码解释:

  当我们点击图片的时候,onclick会响应faceadd这个函数,num是传值,然后在这里我们构造了一个动态的图片html标记字符串,最后用pasteHtml方法把得到的字符串粘贴到光标位置,message.focus(),是让message变为活动控件,message.document.selection.createRange()是得到光标位置以便插入到光标所处处理,这个之前讲过的。

经我们点击测试,这个效果没有问题:

总 结:

       这一讲就暂时讲解这么多,这里需要注意几点:

第一:经过长期使用和观察发现,如果表情放在编辑器边上的话,并且是大量闪图(.gif),由于浏览器刷新问题,会影响编辑器和其它搜索框等表单中的光标闪动速度,为此我提供了这样的解决办法,请看这篇文章:

网页文本框中光标闪动过快的解决办法

第二:以上表情地址是我引用bbs.tv150.cn上的,只供大家学习之用,如果自己网站用的话,请下载存到自己的服务器上,不要引用bbs.tv150.cn,不然我服务器承受不起过多的引用,还有一点需要说明,在教程中没有经过淘宝的允许而使用了他们的表情,这是一种侵权行为,为此本人深刻反醒这种不道德举动。

本来想把小窗口插入表情也一起讲了,但是我感觉和插入图片一起讲更合适一些,所以小窗口插入表情将会在下一章中讲解,请随时关注。

以上文章由老杂毛原创,版权没有,转载不究,如果你有不同意见,你全是对的。(老杂毛/文)

完整代码如下:

#lt;script type="text/javascript"#gt;
function FormatText(command, option)
{
   frames.message.document.execCommand(command, true, option);
   frames.message.focus();
}
function insertelement(obj)
{
   message.focus();
   var range =message.document.selection.createRange();
   var val="";
   var str="";
   if (obj=="img")
   {
     val=prompt("请输入图片地址:", "http://")
     str="#lt;img src=\""+ val +"\" /#gt;";
   }
   if (obj=="video")
   {
     val=prompt("请输入视频地址:", "http://")
     str="#lt;embed src=\""+val+"\" quality=\"high\" width=\"480\" height=\"400\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\"#gt;#lt;/embed#gt;";
   }
   range.pasteHTML(str);
}

function setMode(newMode)
{
  bTextMode = newMode;
  var cont;
  if (bTextMode) {
    cleanHtml();

    cont=frames.message.document.body.innerHTML;
    frames.message.document.body.innerText=cont;
  } else {
    cont=frames.message.document.body.innerText;
    frames.message.document.body.innerHTML=cont;
  }
  message.focus();
}
function cleanHtml()
{
  var fonts = message.document.body.all.tags("FONT");
  var curr;
  for (var i = fonts.length - 1; i #gt;= 0; i--)
  {
    curr = fonts[i];
    if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;
  }
}

// 创建或修改超级链接
function createLink()
{
   var r = message.document.selection.createRange().text;
   var val = prompt("请输入连接地址:", "http://");
   message.document.selection.createRange().pasteHTML("#lt;a href=\""+ val +"\" target=\"_blank\"#gt;"+ r +"#lt;/a#gt;");
}
function faceadd(num)
{
 message.focus();
 var range =message.document.selection.createRange();
 var str1;
 str1="#lt;img src=\"http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/"+num+".gif\"/#gt;";
 range.pasteHTML(str1);

#lt;/script#gt;
#lt;table width="400" border="1" align="center"#gt;
#lt;tr#gt;#lt;td height="30"#gt;
  #lt;input type="button" name="b" value="( B )" onClick="FormatText('bold', '')" /#gt;
  #lt;input type="button" name="I" value="( I )" onClick="FormatText('italic', '')" /#gt;
  #lt;input type="button" name="U" value="( U )" onClick="FormatText('underline', '')" /#gt;
  #lt;input type="button" name="P" value="Pic" onClick="insertelement('img')" /#gt;
  #lt;input type="button" name="V" value="Video" onClick="insertelement('video')" /#gt;
  #lt;input type="button" name="Link" value="Link" onClick="createLink()" /#gt;
  #lt;input type="button" name="UNLink" value="UNLink" onClick="FormatText('unLink')" /#gt;

#lt;/td#gt;
#lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;iframe src="about:blank" id="message" frameborder="0" width="400" height="300"#gt;#lt;/iframe#gt;
     #lt;script language="javascript"#gt;frames.message.document.designMode = "On";#lt;/script#gt;
#lt;input onClick="setMode(this.checked);" name="viewhtml" type="checkbox" value="ON"#gt;
#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

#lt;table width="410" border="1" align="center"#gt;
  #lt;tr#gt;
    #lt;td colspan="5"#gt;#lt;strong#gt;表情#lt;/strong#gt;#lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/27.gif" style="cursor: pointer;" onclick="faceadd('27')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/70.gif" style="cursor: pointer;" onclick="faceadd('70')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/0.gif" style="cursor: pointer;" onclick="faceadd('0')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/84.gif" style="cursor: pointer;" onclick="faceadd('84')"#gt;#lt;/td#gt;
    #lt;td align="center"#gt;#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/htmlPop/face/67.gif" style="cursor: pointer;" onclick="faceadd('67')"#gt;#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

 

阅读: (2848)  评论(30)  
 
网友评论:
 
 1.124.126.225.1102011/1/12 11:49:28 
有了表情的编辑器就像充满活力一般,谢谢老师的讲解,学习了。
 2.113.239.70.2062011/2/14 11:00:18 
怎么样把编辑器里面的内容提交到数据库里啊
 3.124.226.101.202011/3/11 16:18:13 
怎样上传图片进编加器啊
 4.124.226.101.202011/3/11 16:18:56 
第七讲什么时候出来啊?期盼啊
 5.lai2011/5/10 13:46:20 
请问下,这个为什么在firefox不能运行,怎么样才能让他适应所有的浏览器呢?谢谢
 6.fourendetounc2011/11/4 13:48:23 
What about the English invent football championship?
 7.118.114.25.372012/3/18 16:50:59 
紧跟老师的步伐~  出新讲
 8.2016/6/1 8:33:06 
 9.2016/6/10 7:10:45 
 10.2016/6/17 6:58:08 
 11.2016/6/21 22:23:56 
 12.2016/7/23 15:56:50 
 13.2016/8/11 0:17:01 
 14.2016/11/12 12:43:57 
 15.2016/12/5 13:39:52 
 16.2017/1/2 7:57:15 
 17.2018/2/2 20:46:22 
 18.2018/2/17 18:00:13 
 19.2018/2/19 4:52:53 
 20.2018/3/9 0:28:56 
 21.2018/3/25 19:30:25 
 22.2018/3/28 23:57:56 
 23.2018/4/12 7:02:39 
 24.2018/5/11 15:42:50 
 25.2018/6/21 16:16:32 
 26.2018/7/29 22:59:05 
 27.2018/10/19 1:53:32 
 
相关文章:
 微信支付asp.net V3.3.7 sys
 ERRORLOG 文件太大的处理办法
 Attempted to read or w
 Ctrl键自动按下,Ctrl键和Alt总感觉
 解决 Your project contai
 adb install 多设备id号一样,如
 如何去掉优酷,土豆等网站的广告?
 webview的loadData方法加载乱码
 让iis7支持apk文件下载
 sql利用游标循环,遍历表循环结果集
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842