WordPress Html code runtime box plug-in application details

The plug-in is not original. I used part of the code highlighting plug-in and integrated the zero clipboard into the js library of the clipboard. You can click the "" button in the background editor to add the code to be run. The front-end automatically generates a code run box.

Wordpress code runtime box plug-in features:

1. Click the button in the background to bring up a window that can be inserted directly.
2. html code formatting is supported (JavaScript code or other format code cannot be directly written in the formatted html input box, which may cause insufficient memory)
3. The front-end code runtime box supports running code, copying code (implemented using zero clipboard for detailed reference), and saving code (with defects, only supporting ie).
4. Foreground style customization. The code run box adopts pre simulation and the contenteditable attribute is added to the code run box. The style can be customized.
5. Add code Ins. Only one button is added in the background editor, which does not affect the upgrade or page loading speed.
Install the wordpress code runtime box plug-in: 1.download pizi_run_code.zip from the website background to upload and install, or decompress the package to the wp-content/plugins folder for background installation.
2. jquery support is required. Load the jquery library and zero clipboard Library. Note the path (available absolute address)

The code is as follows:	Copy code
<Script type = "text/javascript" src = "/wp-content/themes/pizi/jquery-1.6.4.min.js"> </script> <Script type = "text/javascript" src = "/wp-content/plugins/pizi_run_code/ZeroClipboard. js"> </script>

3. Load the js part and put it in the js file of the original topic, or create a new js file. Load the file and put it behind jquery.

The code is as follows:

Copy code

$ (Function (){ $ (". Runcode"). attr ("contentEditable", "true "); $ (". Runit"). click (function (){ Var code = $ (this). parents (". code_contain"). find (". runcode"). text (); RunCode (code ); }); $ (". Saveit"). click (function (){ Var code = $ (this). parents (". code_contain"). find (". runcode"). text (); SaveCode (code ); }); CopyThis (); }) Function runCode (code ){ Var winname = window. open (''," _ blank ",''); Winname.doc ument. open ('text/html ', 'replace '); Winname. opener = null; Winname.doc ument. write (code ); Winname.doc ument. close (); } Function saveCode (code ){ Var winname = window. open ('', '_ blank', 'Top = 10000 '); Winname.doc ument. open ('text/html ', 'replace '); Winname.doc ument. write (code ); Winname.document.exe cCommand ('saveas', '', 'code.htm '); Winname. close (); } Var clip = null; Function copyThis (){ Clip = new ZeroClipboard. Client (); Clip. setHandCursor (true ); $ ('. Copyit'). mouseover (function (){ Var code = $ (this). parents (". code_contain"). find (". runcode"). text (); Clip. setText (code ); If (clip. div ){ Clip. receiveEvent ('mouseout', null ); Clip. reposition (this ); } Else clip. glue (this ); Clip. receiveEvent ('mouseover', null ); }); }

4.20.css, add style.css or save another css file

The code is as follows:

Copy code

. Code_contain {margin-top: 10px ;} . Code_contain. runcode {width: auto; max-height: 150px; overflow: auto; border: 1px dashed #7D9008; padding: 3px; line-height: 18px; outline: none; margin: auto; width: 95%; padding: 5px 10px ;} . Code_contain p {width: 95%; margin: auto ;} . Code_contain. runit {margin-left:-10px ;} . Code_contain. runit ,. code_contain. copyit ,. code_contain. saveit {background: none repeat scroll 0 0 #9BBB38; border-radius: 10px 10px 10px; color: # FFFFFF; font-size: 12px; padding: 2px 10px; font-weight: normal; margin-right: 7px ;} . Code_contain. runit: hover,. code_contain. copyit: hover,. code_contain. saveit: hover {background: # E58712; box-shadow: 0px 0px 20px # ddd ;} . Code_contain. copyit. hover {background: # E58712; box-shadow: 0px 0px 20px # ddd;} // Move the mouse to the style on the copy code button . Code_contain. code_notice {font-size: 12px; padding-left: 7px ;}