Add a code runtime box to the csdn blog, which is compatible with Firefox!

 

Add a csdn blogCodeRun box, compatible with FF

The csdn blog background does not have the code running function. As a front-end engineer, it is often used to test HTML code, so I want to add this function to my blog, I thought this was a very simple task, but I encountered a problem in practice and made a record.

Let's talk about my blog change process. I first found a lot on Google, but few of them are compatible with ff. Finally, I found Yang Zhengyi's blog, which contains a relatively good running code (here I would like to thank you ), this satisfies the compatibility of FF (only because the replication code function cannot solve the security problem of FF itself, and can basically run other functions ). I thought it would be okay to put this JavaScript code,...

Csdn blog backgroundArticleThe biggest trouble in adding a system is that you cannot write a custom id value in the HTML writing mode of the article. For example, if you want to write a custom container ID attribute, and you want to set a style for it. After you add and submit an article, you can view the source code on the webpage, and you will find that the id you assigned has disappeared. Ah... it seems that they filtered out the ID for me. Without the ID, I had trouble finding a container using Js.

Forget it. Let's try another way. Chairman Mao said, "You have to do it yourself ". Let's start DIY.

1. A's code is only for a runtime box. I want to achieve that multiple runtime boxes can be repeatedly called on one page.

2. If the ID cannot be used for the textarea container, use getelementsbytagname to obtain the set and then retrieve the currently called one.

3. The last modified code looks like the following. Release all JS Code first, as shown below:

// This modification is intended to add a system for the background Article of the csdn blog. It is compatible with the FF code runtime box function. The Save As function under FF is not supported. Other functions can use function runcode (Num) {var OBJ = document. getelementsbytagname ("textarea"); For (VAR I = 0; I <obj. length; I ++) {If (num = I) {var newwin = Window. open (''," _ blank ",''); newwin.doc ument. open ('text/html ', 'replace'); newwin. opener = NULL var testcode = OBJ [num]. value; newwin.doc ument. write (testcode); newwin.doc ument. close () ;}}/***** Save the Code as an HTML page. Currently, only Internet Explorer is supported ** * *** // The main cause of Firefox incompatibility is that FF does not support Execcommand ('saveas', '', 'filename'); function savecode (Num) {var OBJ = document. getelementsbytagname ("textarea"); For (VAR I = 0; I <obj. length; I ++) {If (num = I) {var newwin = Window. open ('', '_ blank', 'top = 10000 '); newwin.doc ument. open ('text/html ', 'replace'); var testcode = OBJ [num]. value; newwin.doc ument. write (testcode); newwin.document.execcommand('saveas','code.htm'); NEWW In. close () ;}} function copycode (Num) {var OBJ = document. getelementsbytagname ("textarea"); For (VAR I = 0; I <obj. length; I ++) {If (num = I) {var testcode = OBJ [num]. value; If (copy2clipboard (testcode )! = False) {alert ("the generated code has been copied to the clipboard. You can use Ctrl + V to paste it to the desired place! ") ;}}}Copy2clipboard = function (txt) {If (window. clipboardData) {window. clipboardData. cleardata (); window. clipboardData. setdata ("text", txt);} else if (navigator. useragent. indexof ("Opera ")! =-1) {window. location = txt;} else if (window. netscape) {try {Netscape. security. privilegemanager. enableprivilege ("universalxpconnect");} catch (e) {alert ("your Firefox security restrictions limit you to perform clipboard operations. Open 'about: config' and set signed. applets. codebase_principal_support 'is set to true and then retry "); Return false;} var clip = components. classes ['@ mozilla.org/widget/clipboard1_1').createinstance (components. interfaces. nsiclipboard); If (! Clip) return; var trans = components. classes ['@ mozilla.org/widget/transferable1_1'assist.createinstance (components. Interfaces. nsitransferable); If (! Trans) return; trans. adddataflavor ('text/Unicode '); var STR = new object (); var Len = new object (); var STR = components. classes ["@ mozilla.org/supports-string1_1"]. createinstance (components. interfaces. nsisupportsstring); var copytext = txt; Str. data = copytext; trans. settransferdata ("text/Unicode", STR, copytext. length * 2); var clipid = components. interfaces. nsiclipboard; If (! Clip) return false; clip. setdata (trans, null, clipid. kglobalclipboard );}}

 

With the JS Code, you must add the following structure to JS when adding an article. Add an empty textarea container and then three control buttons.

 
<Textarea rows = "12" Cols = "75"> test content </textarea> <Div style = "clear: Both;"> <input onclick = "runcode (1) "type =" button "value =" run code "/> <input onclick =" copycode (1) "type =" button "value =" Copy code "/> <input onclick =" savecode (1) "type =" button "value =" Save code "/> </div>
 

 

Note: When adding an article, you must assign the serial number value of textarea to runcode (1), starting from 0.

 

This is the first test box. I can run it! <Br/>

This is the second test box. I can also run it! <Br/>

After the above processing, you can basically run the test code in the csdn blog. add an article to try. Good luck!