小技巧：如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框
如标题，已经知道的同学们就不用往下看了，以免浪费时间，本文内容是为博客园新手准备的。
众所周知，博客园发布博文时提供了二种html编辑器：
TinyMCE相对在代码着色方面更出色，排版出来的文章也更好看，所以博客园推荐大家使用它，但是这东西有一个致命的缺点：如果用它直接插入Sliverlight(Xap)，保存后会自动识别为Flash，这令银光侠们苦恼不已，昨天我向博客园团队反馈了，得到的回复是暂时无法解决。既然如此，那就“自己动手，丰衣足食”吧。
为了满足急性子人的好奇心，先给出最终的效果“http://www.cnblogs.com/yjmyzz/archive/2010/06/29/1767637.html”，这篇文章里同时插入了flash和sliverlight。点击图片后，会以曾经一度风行的“半透明弹出框”方式弹出flash和silverlight。（IE6下好象有些问题，不过象IE6这种老古董，也懒得去理它了）
步骤：
一、设置步骤
* 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="https://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="http://pic002.cnblogs.com/img/yjmyzz/201006/2010063014380491.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="http://pic002.cnblogs.com/img/yjmyzz/201006/2010063014422625.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>
最终效果:
如果觉得本文内容还比较实用，顺手推荐一下，让更多的人看到吧.
作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
