zoukankan      html  css  js  c++  java
  • 小技巧:如何在(博客园)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;  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=' 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
          <div style=' 75px; float: left;'><img src='http://images.24city.com/noie6/ie6nomore-warning.jpg' alt='提示您升级浏览器'/></div>
          <div style=' 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=' 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=' 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=' 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=" 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{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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    linux C gcc -lm
    ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了
    ArrayList调用remove方法需要注意的地方
    关于Java中File的renameTo函数
    Java管道流
    NPOI Excel 单元格背景颜色对照表
    Java 简单图片截取
    maven pom.xml 配置 cxf-codegen-plugin 生成web服务客户类型
    ZeroClipboard 简单应用
    PromiseJs
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1768397.html
Copyright © 2011-2022 走看看