小技巧：如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框-阿里云开发者社区

小技巧：如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框

2010-06-30 1257

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如标题，已经知道的同学们就不用往下看了，以免浪费时间，本文内容是为博客园新手准备的。众所周知，博客园发布博文时提供了二种html编辑器：CuteEditor 和 TinyMCE。(其实还有一种纯文本方式，不过很少有用人它，本文就不讨论它了) TinyMCE相对在代码着色方面更出色，排版出来的文章也更好看，所以博客园推荐大家使用它，但是这东西有一个致命的缺点：如果用它直接插入Sliverlight(Xap)，保存后会自动识别为Flash，这令银光侠们苦恼不已，昨天我向博客园团队反馈了，得到的回复是暂时无法解决。

如标题，已经知道的同学们就不用往下看了，以免浪费时间，本文内容是为博客园新手准备的。

众所周知，博客园发布博文时提供了二种html编辑器：CuteEditor 和 TinyMCE。(其实还有一种纯文本方式，不过很少有用人它，本文就不讨论它了)

TinyMCE相对在代码着色方面更出色，排版出来的文章也更好看，所以博客园推荐大家使用它，但是这东西有一个致命的缺点：如果用它直接插入Sliverlight(Xap)，保存后会自动识别为Flash，这令银光侠们苦恼不已，昨天我向博客园团队反馈了，得到的回复是暂时无法解决。既然如此，那就“自己动手，丰衣足食”吧。

为了满足急性子人的好奇心，先给出最终的效果“http://www.cnblogs.com/yjmyzz/archive/2010/06/29/1767637.html”，这篇文章里同时插入了flash和sliverlight。点击图片后，会以曾经一度风行的“半透明弹出框”方式弹出flash和silverlight。（IE6下好象有些问题，不过象IE6这种老古董，也懒得去理它了）

步骤：

一、设置步骤

先登录博客园-->管理-->设置

1、定位到“通过css定制页面风格”

 * html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
* body { height: 100%; color: #454545; }
.ajaxBg { background-color: #666; width: 100%; height: 100%; left: 0; top: 0; filter: alpha(opacity=50); opacity: 0.5; z-index: 9999; position: fixed !important; position: absolute; }
.ajaxPopUp { left: 50%; top: 50%; margin-top: 0px; z-index: 99999; position: fixed !important; position: absolute; background: #fff; font-size: 12px; line-height: 20px; border: solid 1px #666; padding: 1px; }
.ajaxPopUp .title, .ajaxPopUp .footer { background: #efefef; padding: 0 3px; }
.ajaxPopUp .body { padding: 3px; }
.ajaxPopUp .footer { text-align: right; }
.ajaxPopUp .title { font-weight: bold; }
.postBody a{color:#399ab2!important}

先把这一段css贴到里面，如果还要加入其它自定义样式，可自行修改

2、再定位到"页首HTML代码"

    <!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://images.24city.com/noie6/ie6nomore-cornerx.jpg' style='border: none;' alt='关闭本提示'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://images.24city.com/noie6/ie6nomore-warning.jpg' alt='提示您升级浏览器'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>提示：您还在用即将淘汰的IE 6？</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>为了获得更好的用户检验，请升级您的浏览器！<br/>(从右边任选一个升级就不会出现本提示)</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://images.24city.com/noie6/ie6nomore-ie8.jpg' style='border: none;' alt='升级到微软公司的Internet Explorer 8'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://images.24city.com/noie6/ie6nomore-firefox.jpg' style='border: none;' alt='升级为Firefox浏览器'/></a></div>      
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://images.24city.com/noie6/ie6nomore-safari.jpg' style='border: none;' alt='升级为苹果公司的Safari 4浏览器'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://images.24city.com/noie6/ie6nomore-chrome.jpg' style='border: none;' alt='升级为Google公司的Chrome浏览器'/></a></div>
    </div>
  </div>
  
  <![endif]-->
<script type="text/javascript" src="http://files.cnblogs.com/yjmyzz/cnblog.js"></script>
<div class="ajaxBg" id="ajaxBg" style="display:none">
    </div>
    <div class="ajaxPopUp" id="ajaxPopUp" style="display:none">
        <div class="title" id="ajaxTitle">            
        </div>
        <div class="body" id="ajaxBody">           
        </div>
        <div class="footer">
            <a href="javascript:void(0)" onclick="_jimmyClosePopUp()">Close(关闭)</a></div>
    </div>

再贴入这样一段代码(注：这段代码同时把IE6给拒绝了。建议大家都加上，让IE6走得快一点儿。另外里面的几个图片地址，比如http://images.24city.com/noie6/ie6nomore-safari.jpg，为了避免图挂掉，建议大家先down回去，再传到各自的网盘或其它空间中，这是我在公司服务器上临时放置，很快会删除。)

二、如何使用

1、插入Flash

切换到编辑器的html源代码模式，类似下面这样输入：

<p><a href="javascript:void(0)" onclick="_jimmyShowPopUp('swf','http://images.24city.com/jimmy/flash/mouseavoider.swf',300,400,'Mouse Avoid 在线演示(Flash版)');return false"><img src="https://yqfile.alicdn.com/img_93779f47397a45cc8c3ce6db60542826.jpg" /><br />在线演示</a></p>

效果如下：

在线演示

2、插入Silverlight

同上，在html源代码模式下，类似下面这样输入：

<p><a href="javascript:void(0)" onclick="_jimmyShowPopUp('xap','http://images.24city.com/jimmy/mouseavoider/ClientBin/MouseAvoider.xap',300,400,'Mouse Avoid 在线演示(Silverlght版)');return false"><img src="https://yqfile.alicdn.com/img_57751f50e67fd1c53a5437b20c172d60.jpg" /><br />在线演示</a></p>

效果如下：

在线演示

注意：由于Silverlight默认的“同域同源”安全限定，如果您引用的xap文件不是直接上传到博客园的，有可能显示不出来，请检查xap所在服务器的iis是否正确添加了xap的mime类型，另外xap所在域名的根目录下是否正确放置了策略文件。

3、插入大图片

同上，示例代码为：

<p><a href="javascript:void(0)" onclick="_jimmyShowPopUp('img','http://image163.poco.cn/mypoco/myphoto/20100630/15/5542838620100630155730015_640.jpg',560,750,'巴拉圭美胸女球迷走红');return false"><img src="http://image163.poco.cn/mypoco/myphoto/20100630/15/5542838620100630155730015_640.jpg" height="100"/><br />点击看大图</a></p>

效果图

巴拉圭美胸女球迷走红
点击看大图

4、插入网页

代码为：

<p><a href="javascript:void(0)" onclick="_jimmyShowPopUp('frame','http://www.baidu.com/',480,640,'百度');return false">打开百度</a></p>

效果

打开百度

5、插入运行代码框

注：特别感谢“司徒正美”，这部分js代码是从他的博客上剥出来的 :)

html模式下先插入代码：

<textarea rows="10" id="runcode1" style="width: 80%;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IE7下当position:relative遇到text-align:center</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style type="text/css">
      body{padding:0;margin:0}      
      #wrap{text-align:center}
      #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;}
    </style>
</head>
<body>
 <div id="wrap"> 
 <div id="toolbar"></div>
 </div> 
</body>
</html>
</textarea>

注：textarea之间的即为经过HtmlEncode处理后的源代码。然后再继续插入一段代码：

<p><button title="runcode1" class="runcode">运行代码</button></p>

最终效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当position:relative遇到text-align:center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> body{padding:0;margin:0} #wrap{text-align:center} #toolbar{width:100%;height:25px;background:#000;position:fixed;bottom:0;} </style> </head> <body> <div id="wrap"> <div id="toolbar"></div> </div> </body> </html>

如果觉得本文内容还比较实用，顺手推荐一下，让更多的人看到吧.

小技巧：如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框

热门文章

最新文章

相关电子书