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

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

2010/11/22 17:45:14
 

        今天是编辑器开发的第四讲,之前的几讲讲的都是在光标位置插入一些信息,而需要修饰某些文字的时候我们只需要用execommand指令就可以完成功能了。但是有些时候我们在修饰文字的时候不仅仅只是加粗或倾斜等,我们需要增加一些自己的自定义标记,比如在外层套上两个div,或加一个style自己增加一些属性,这样execcommand指令就无法完成了,那我们应该如何实现这个功能呢。

网页编辑器查看源代码(视图切换)

        比如我们要为一段文字加链接,我们可以通过以下的代码完成:

ID.document.execCommand('CreateLink',false,'http://www.laozamao.com');

        我们用这个来举个例子来说明一下,为了让我们能所见即所得我们增加一个小功能,可以查看源代码的功能,在下面放一个小的复选框

当我们点击这个复选框的时候就可以看到源代码的内容。

代码如下:

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

增加这两个函数之后,在加入一个复选框:

#lt;input onClick="setMode(this.checked);" name="viewhtml" type="checkbox" value="ON"#gt;

这样我们就可以实现源代码和预览视图切换了

为文字增加超级连接

把之前讲座做好的编辑器打开,然后在功能栏的地方增加以下代码:

#lt;input type="button" name="Link" value="Link" onClick="FormatText('CreateLink', '')" /#gt;

这句话的意思是增加一个按钮,和之前的没什么区别,但是点击按钮之后我们所看到的东西却和之前的不太一样,效果如下:

类型的地方还可以选择好几个,我们这里选择http的。

然后点击确定:

我们点击下面的复选框之后可以发现这段文字已经加上超级链接了。

为文字增加新窗口打开的超级链接

我之前的博客编辑器和论坛编辑器都是用这种方法创建的,但是逐渐的我发现这样创建的链接无法在新窗口打开,这不太符合中国人上网的习惯,点着点着就找不到原来的网页了,所以我们需要让他在新窗口中打开(现在多标签浏览器会在新标签中打开)。

打开我们之前的编辑器,然后在js代码中增加如下代码:

// 创建或修改超级链接
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;");
}

函数功能讲解:

首先得到编辑器中选中的文本,然后弹出一个对话框,输入链接的地址,最后用选中的文本和输入的链接地址拼装成一个超级链接。

增加完以上的代码之后我们还需要在工具栏增加两个按钮:

  #lt;input type="button" name="Link" value="Link" onClick="createLink()" /#gt;
  #lt;input type="button" name="UNLink" value="UNLink" onClick="FormatText('unLink')" /#gt;

第一个是增加链接用的,其实就是前面的那个按钮,把触发的事件改成createlink()这个刚才我们加上的函数,然后还是用command指令来做去掉链接的功能。我们来演示一下。

我们可以看到这次的对话框和上次的不太一样了,这里我们输入网址之后可以看到如下代码:


target=_blank 已经加上了,这样我们的链接就是新窗口打开的了。

同样你可以用Unlink按钮把这行的链接去掉,这个功能就不演示了。

PS:在预览视图直接敲网址的话会默认加上链接,这个链接是本窗口打开的,可以在文章发布的时候用正则表达式格式化一遍链接,具体的替换方法请参考我这篇文章:正则表达式,将连接做成跳转

总 结

用以上增加链接的函数,其实我们可以应用到很多功能,比如我现在的文章,代码段的地方都是黑色背景,其实我就是在代码上加了一个div,增加了一些样式,原理和上面拼装链接的方法差不多,后面我会讲到。

好了,到现在为止我们的编辑器就已经有很多的功能了。全代码如下:

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

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

OK,今天这一讲就到这里,有问题请给我留言(老杂毛/文)

2011.1.11更新:

有朋友反映代码复制下去之后不可用,这里提供一下解决办法

由于页面宽度换行问题,所以在这里代码截断了,现在修正了这个功能,之前复制下去的代码把中间的空行删除掉就行了。

阅读: (1957)  评论(13)  
 
网友评论:
 
 1.219.143.130.1962010/11/23 15:13:44 
感觉讲的非常好。
 2.117.40.56.2092010/11/30 11:18:07 
讲的很好

但是在如果粘贴word中的文本,和输入
编程代码在存入数据库的时候就出问题了。
 3.218.108.76.22010/12/20 9:57:07 
请问如何让输入回车加的是<br/>而不是<p>呢?
 4.123.138.19.222010/12/22 13:54:06 
受益匪浅
 5.2016/7/1 0:04:51 
 6.2016/7/11 23:19:51 
 7.2016/11/9 5:26:20 
 8.2016/11/28 2:24:21 
 9.2018/3/3 12:38:19 
 10.2018/3/20 7:52:21 
 11.2018/3/20 7:52:32 
 12.2018/4/3 8:06:31 
 13.2018/4/30 17:55:45 
 
相关文章:
 微信支付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