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

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

2010/10/19 15:07:17
 

       在上一讲中我们已经做了一个简单的编辑框,通过这个编辑框我们就可以在网页上写一些字上去了,但是如果想要为这些字做一些美化的工作,还需要为编辑框增加一些功能,那么今天我们就来做几个简单的功能来完善一下上一讲中的编辑框。

execCommand指令讲解

      execCommand是一个可以执行指令的函数,比如:

document.execCommand("Open");  
//将当前页面另存为
document.execCommand("SaveAs");  
//剪贴选中的文字到剪贴板;
document.execCommand("Cut","false",null);  
//删除选中的文字;
document.execCommand("Delete","false",null); 

      我们利用这个指令就可以完成很多编辑器中最基本的功能,如:加粗,倾斜,下划线,链接,字体,字号,背景等等很多功能都是通过这个函数来完成的。

举例说明:

     为一段文字加粗,倾斜,下划线,做这三种效果,首先在上一讲中的编辑框中放上三个小按钮,如图所示:

代码如下:

#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 )" /#gt;
  #lt;input type="button" name="I" value="( I )" /#gt;
  #lt;input type="button" name="U" value="( U )" /#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;

把代码放到一个文本文件里,然后保存成html的,界面就出来了,下面我们来实现这三个功能。

首先我们先创建一个javascript的函数,这样每次只需要调用这个函数就可以了,代码如下:

#lt;script type="text/javascript"#gt;
function FormatText(command, option)
{
   frames.message.document.execCommand(command, true, option);
   frames.message.focus();
}
#lt;/script#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;script type="text/javascript"#gt;
function FormatText(command, option)
{
   frames.message.document.execCommand(command, true, option);
   frames.message.focus();
}
#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;/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;

同样把代码复制下去另存成一个html的页面双击打开,一个简单的编辑器就做好了。

除了这三个功能以外,其它很多功能都可以用这个方法来实现的,具体实现方法请看这篇文章:http://www.laozamao.com/Contents.asp?id=10372

总 结:

通过execCommand这个函数,基本就能完成一个简易编辑器的所有功能了,但是想要完成复杂的功能只通过这一条指令还远远不够,还需要对js有一定的认识才行。

前两天又为我的博客增加了两个功能,以前写文章里总有大量的代码,如果不加重显示一下总感觉文章有点凌乱,所以加了一个div功能,这样加一个背景看着就整齐多了。

把我的编辑器再次截图给大家看一下:

好了,今天这一讲就到这里,下一讲会讲解一些高级点的功能。(老杂毛/文)

阅读: (2722)  评论(18)  
 
网友评论:
 
 1.211.143.132.742010/10/20 11:01:37 
原来还有这么功能强大的一个指令,学习了
谢谢分享
 2.116.23.31.2412010/10/20 23:47:24 
支持一下
 3.222.204.1.62010/10/22 21:52:48 
什么时候出下一讲啊!下一讲能讲些传文件的就最好了,谢谢博主
 4.117.40.138.702011/1/10 14:39:27 
不支持火狐啊~
 5.119.253.169.182011/9/23 11:11:08 
我在www.w3school.com里自学没有发现js那么强的execCommand函数的指令
 6.118.114.25.372012/3/18 15:46:20 
ie8下不出效果 不能加粗 等呢?
google 火狐也是
 7.2016/6/13 7:59:24 
 8.2016/6/16 22:41:58 
 9.2016/6/21 14:11:17 
 10.2016/6/26 1:44:25 
 11.2016/8/16 17:49:24 
 12.2016/12/1 20:19:02 
 13.2018/2/2 20:36:18 
 14.2018/2/19 3:56:03 
 15.2018/3/9 0:22:17 
 16.2018/3/25 19:11:00 
 17.2018/4/12 8:00:56 
 18.2018/5/11 15:07:47 
 
相关文章:
 微信支付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: 657603[email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842