TIPS: how to insert Flash, sliverlight, and code runtime boxes in the tinymce editor Mode

For example, if you already know the title, you don't need to read it down to avoid wasting your time. This article is intended for new bloggers.

 

As we all know, the blog community provides two HTML editors when publishing blog posts:Cuteeditor and tinymce. (In fact, there is also a plain text method, but it is rarely useful, so this article will not discuss it)

 

Tinymce is relativelyCodeBetter coloring, typographicalArticleIt is also better-looking, so we recommend that you use it in the blog Park, but it has a fatal drawback: if you use it to insert sliverlight (xap) directly, it will be automatically recognized as flash after being saved, this upset the silver light Xia people. I gave feedback to the blog Park team yesterday and the reply I got was temporarily unsolvable. In this case, "Do it yourself.

 

In order to satisfy the curiosity of the acute child, the final effect is given first. After you click the image, flash and Silverlight will pop up in the "translucent pop-up box" that was once popular. (IE6 seems to have some problems, but I am too lazy to handle it like IE6)

 

Steps:

1. Setup steps

Log on to the blog center first --> Manage --> set

1,Go to "customize page style through CSS"

 
* HTML {filter: expression(document.exe ccommand ("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}
 

First paste this section of CSS into it. If you want to add other custom Styles, you can modify them by yourself.

 

2,Go to "Top HTML code"

<! -- [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; '>  </a> </div> <Div style = 'width: 640px; margin: 0 auto; text-align: Left; padding: 0; overflow: hidden; color: black; '> <Div style = 'width: 75px; float: left; '>  </div> <Div style = 'width: 275px; float: left; font-family: Arial, sans-serif; '> <Div style = 'font-size: 14px; font-weight: Bol D; margin-top: 12px; '> Note: Are you still using the IE 6 to be eliminated? </Div> <Div style = 'font-size: 12px; margin-top: 6px; line-Height: 12px; '> for better user testing, please upgrade your browser! <Br/> (this prompt will not appear if you select any upgrade on the right) </div> <Div style = 'width: 75px; float: left; '> <a href = 'HTTP: // www.browserforthebetter.com/download.html' target =' _ blank '>  </a> </div> <Div style = 'width: 75px; float: left; '> <a href = 'HTTP: // www.firefox.com' target = '_ blank'>  </a> </div> <Div style = 'width: 73px; float: Left; '> <a href = 'HTTP: // www.apple.com/safari/download/'target =' _ blank '>  </a> </div> <Div style = 'float: left; '> <a href = 'HTTP: // www.google.com/chrome'target =' _ blank '>  </a> </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 (close) </a> </div>

Paste the code like this (Note: This Code also rejects IE6. We recommend that you add this item to make IE6 faster. In addition, there are several image addresses, such as images .)

 

Ii. How to Use

1,Insert Flash

Switch to the editor's htmlSource codeMode, similar to the following input:

 
<P> <a href = "javascript: void (0)" onclick = "_ jimmyshowpopup ('swf ', 'HTTP: // online demonstration of protected avoid (flash) '); Return false ">  <br/> Online Demo </a> </P>
 

The effect is as follows:

Online Demo

2,Insert Silverlight

Same as above. In HTML source code mode, input similar to the following:

<P> <a href = "javascript: void (0)" onclick = "_ jimmyshowpopup ('xap ', 'HTTP: // online demonstration of protected avoid (silverlght) '); Return false ">  <br/> Online Demo </a> </P>
 

The effect is as follows:

Online Demo

Note: Due to the default "same-origin" security limitation of Silverlight, if the xap file you reference is not directly uploaded to the blog, it may not be displayed, check whether the xap MIME type is correctly added to iis on the xap server, and whether the policy file is correctly placed in the root directory of the xap domain name.

3,Insert large image

The sample code is as follows:

<P> <a href = "javascript: void (0)" onclick = "_ jimmyshowpopup ('img ', 'HTTP: // callback '); return false ">  <br/> click to see the big picture </a> </P>
 

Click to view the chart

4,Insert webpage

Code:

 
<P> <a href = "javascript: void (0)" onclick = "_ jimmyshowpopup ('framework', 'HTTP: // www.baidu.com/', 'baidu '); return false "> open Baidu </a> </P>
 

Effect

Open Baidu

5,Insert the Running code box

NOTE: Special thanks to Situ zhengmei. This part of JS Code is extracted from his blog.

In HTML mode, insert the code first:

<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">  
 
Note: textarea is the source code after htmlencode processing. Then insert a piece of code:
 

<P> <button Title = "runcode1" class = "runcode"> run the Code </button> </P>
 
 
Final effect:
 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> When position: relative encounters text-align: center </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta http-equiv =" X-UA-compatible "content =" Ie = emulateie7 "/> <br/> <style type = "text/CSS"> <br/> body {padding: 0; margin: 0 }< br/> # wrap {text-align: center }< br/> # toolbar {width: 100%; Height: 25px; Background: #000; position: fixed; bottom: 0 ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Wrap"> <br/> <div id = "toolbar"> </div> <br/> </body> <br/> </ptml> <br/>
Run code
 

 
If you think the content of this article is more practical, we recommend it to more people.