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

【网页编辑器开发】html在线网页编辑器开发第三讲

2010/10/26 17:50:17
 

        通过上一讲我们已经把编辑器的基本功能都实现了,通常在一些小型论坛或留言板里,我们的编辑器都是非常简单的,有了前两讲的知识完全可以自己开发一个小型编辑器了,但是有的小功能用command还是很难达到要求的,比如插入图片,插入视频,插入flash等等,今天我们就来讲讲这种在编辑器中插入数据的功能实现。

在编辑框中插入数据原理讲解

        比如我们要在某一段文字中间插入一张图片,其实就是插入这样的html代码:

#lt;IMG border=0 alt="描述文字" src="图片地址" width="宽" height="高" /#gt;

简化一些,也可以是这样:#lt;IMG src="图片地址" /#gt;(无论是网络上的还是本机上传的结果都是这样)

如果插入视频,其实就是往编辑器中插入这样的代码:

#lt;EMBED height=400 type=application/x-shockwave-flash align=middle width=480 src=视频地址 quality="high" allowScriptAccess="sameDomain"#gt;#lt;/EMBED#gt;

一般我们做的插入操作都是插入图片或视频等,还有可能插入表格等等,其实原理都是差不多。

在编辑器中插入图片

点击确定之后,如下图:

百度的logo就被我们引用过来了,只要是网络上的图片,我们都可以右击看到路径,把路径复制过来直接写到这个输入框里就可以了。具体实现代码:

#lt;script type="text/javascript"#gt;
function FormatText(command, option)
{
   frames.message.document.execCommand(command, true, option);
   frames.message.focus();
}
function insertpic()
{
   message.focus();
   var rangepic =message.document.selection.createRange();
   var valpic=prompt("请输入图片地址:", "http://");
   var picstr="#lt;img src=\""+ valpic +"\" /#gt;";
   rangepic.pasteHTML(picstr);
}
#lt;/script#gt;
#lt;table width="300" 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="insertpic()" /#gt;
#lt;/td#gt;
#lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;iframe src="about:blank" id="message" frameborder="0" width="300"

height="300"#gt;#lt;/iframe#gt;
     #lt;script language="javascript"#gt;frames.message.document.designMode = "On";#lt;/script#gt;#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

其实只是在上一讲的代码基础上加了这样一段代码:

function insertpic()
{
   message.focus();
   var rangepic =message.document.selection.createRange();
   var valpic=prompt("请输入图片地址:", "http://");
   var picstr="#lt;img src=\""+ valpic +"\" /#gt;";
   rangepic.pasteHTML(picstr);
}

代码讲解:

首先我们通过createrange方法得到光标的具体位置,然后用prompt函数弹出一个可以输入数据的对话框,“请输入图片地址”是提示语,http://这个是输入框里默认数据,当我们在输入框中输入完地址之后,用val获得到然后拼装成一个图片元素,也就是这句话:var picstr="#lt;img src=\""+ val +"\" /#gt;";
最后把这个变量的值放到编辑器的光标位置,这样我们就完成了一个简单的插入图片的功能(图片可以自行调整大小,自定义大小我们会在插入表格功能讲解的时候讲到)。

在编辑器中插入视频

我们知道了插入图片的方法后其实插入视频就非常简单了,方法是一模一样的,只不过在拼装字符器的时候需要拼装视频的html代码,代码如下:

function insertvideo()
{
   message.focus();
   var rangevideo =message.document.selection.createRange();
   var valvideo=prompt("请输入视频地址:", "http://");
   var videostr="#lt;embed src=\""+valvideo+"\" quality=\"high\" width=\"480\" height=\"400\"  align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\"#gt;#lt;/embed#gt;";
   rangevideo.pasteHTML(videostr);
}

然后在加上一个触发这个事件的按钮,我们插入视频的功能就算完了。

  #lt;input type="button" name="V" value="Video" onClick="insertvideo()" /#gt;

效果如下:

就这样,我们的视频代码也完成了。

总 结

为了更简化代码,其实我们可以把插入元素这些功能集合到一个方法里,然后在方法里判断到底应该插入哪些元素,代码如下:

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);
}

这样我们在触发事件的时候就可以这样来写:

  #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;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);
}

#lt;/script#gt;
#lt;table width="300" 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;/td#gt;
#lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;iframe src="about:blank" id="message" frameborder="0" width="300" height="300"#gt;#lt;/iframe#gt;
     #lt;script language="javascript"#gt;frames.message.document.designMode = "On";#lt;/script#gt;#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

好了,加上前面的两讲我们基本把编辑器需要实现的基本功能全都讲解完了,下一讲将会讲解插入表情和其它的一些常用功能,这一讲就到这里吧,如果在看文章的过程中遇到问题请给我留言,如果您感觉文章写的还可以的话别忘了留言支持一下,谢谢。(老杂毛/文)

阅读: (2328)  评论(13)  
 
网友评论:
 
 1.124.200.53.962010/10/30 12:58:28 
讲的非常好,支持。
 2.WordPress啦2010/11/14 15:16:49 
在编辑框中插入数据原理讲解

 3.219.143.130.1962010/11/17 17:30:10 
很好,很强大,每篇文章都写的很详细。
 4.220.175.126.872010/11/19 13:40:13 
很好啊,我就是学着做的


但是在提交数据时把frames中的数据转到文本域中的时候。
document.getElementById("ubbtext").value=frames.message.document.body.innerHTML;
如果iframe中输入的有不匹配的标点符号
如:‘案的发生大幅“‘爱上对方挨打“”“爱上对方””
在这个时候插入数据库的时候,就会报错
javax.servlet.ServletException: com.microsoft.sqlserver.jdbc.SQLServerException: ''fasdf'' 附近有语法错误。

还有个错误就是,我们在修改一个记录的时候,想把数据库中的数据显示在iframe中,就像 frames.message.document.body.innerHTML="<%=nn.getUbbtext()%>";
如果这个<%=nn.getUbbtext()%>中有像上面所说的不匹配的标点的时候,这句话就不能够执行的啊,

这个编辑器中如果输入了不匹配的标点符号,就出错,该如何解决啊

求博主指点!
 5.222.204.1.62010/11/20 8:47:44 
谢谢博主的讲解!
 6.219.134.22.812011/5/28 21:04:56 
讲得好,菜鸟都能听懂.
 7.111.116.3.1012011/10/20 22:06:00 
chrome中不能插入图片和视频
 8.stone2012/4/26 11:14:20 
博主你好!请问firefox并不兼容pasteHTML,图片和视频插入无效(已排除路径问题),您是怎么解决的?

我采用document.write() 替换 pastehMTL(),但是有点卡!
 9.2016/5/31 4:58:36 
 10.2016/6/17 2:49:30 
 11.2016/6/21 18:01:58 
 12.2016/6/26 6:01:02 
 13.2016/7/22 3:33:02 
 
相关文章:
 微信支付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