原创:冰极峰 转载请注明出处
对于运行代码这个功能,我之前也写过一篇文章,这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的,而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入,所以这里再啰嗦一下。
首先,在博客园中添加文章时,如果要用到代码运行功能,你需要将下面这段结构加入到文章中,你可能打开文章的HTML模式来添加这段代码,如下所示:
<
textarea
class
="codetext"
rows
="12"
>
</ textarea >
< div style ="clear: both" >
< input class ="button" onclick ="runCode(0)" type ="button" value ="运行代码" >
< input class ="button" onclick ="copyCode(0)" type ="button" value ="复制代码" >
< input class ="button" onclick ="saveCode(0)" type ="button" value ="另存代码" >
</ div >
</ textarea >
< div style ="clear: both" >
< input class ="button" onclick ="runCode(0)" type ="button" value ="运行代码" >
< input class ="button" onclick ="copyCode(0)" type ="button" value ="复制代码" >
< input class ="button" onclick ="saveCode(0)" type ="button" value ="另存代码" >
</ div >
再定义一下这个运行框的样式,你可以加入到你自已博客的样式表中,如下所示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/*代码运行框样式*/
.codetext{border:1px #c0c0c0 solid;font-size:12px;width:594px;}
.button{border-left:1px #FF8534 solid;border-top:1px #FFB17E solid;border-right:1px #A3470B solid;border-bottom:1px #943B00 solid;background:#FF6600;color:#fff;font-size:12px;font-family: "微软雅黑","verdana","ms song","Arial","宋体", "Helvetica", "sans-serif";}
/*插入的代码框样式*/
.cnblogs_code{border:1px #c0c0c0 solid;background:#fcfcfc;}
下面的是核心JS功能,你可以将它单独定义为一个外部脚本js文件中,然后在页面的头部引用。
<
script type
=
"
text/javascript
"
>
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.document.open( ' text/html ' , ' replace ' );
newWin.opener = null
var testCode = obj[num].value;
newWin.document.write(testCode);
newWin.document.close();
}
}
}
/* ****保存代码为html页面,现阶段只支持IE***** */
// firefox不兼容的主要原因就是因为ff不支持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.document.open( ' text/html ' , ' replace ' );
var testCode = obj[num].value;
newWin.document.write(testCode);
newWin.document.execCommand( ' saveas ' , '' , ' code.htm ' );
newWin.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( " 生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! " );
}
}
}
}
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( " 您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试 " );
return false ;
}
var clip = Components.classes[ ' @mozilla.org/widget/clipboard;1 ' ].createInstance(Components.interfaces.nsIClipboard);
if ( ! clip)
return ;
var trans = Components.classes[ ' @mozilla.org/widget/transferable;1 ' ].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-string;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);
}
}
< / script>
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.document.open( ' text/html ' , ' replace ' );
newWin.opener = null
var testCode = obj[num].value;
newWin.document.write(testCode);
newWin.document.close();
}
}
}
/* ****保存代码为html页面,现阶段只支持IE***** */
// firefox不兼容的主要原因就是因为ff不支持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.document.open( ' text/html ' , ' replace ' );
var testCode = obj[num].value;
newWin.document.write(testCode);
newWin.document.execCommand( ' saveas ' , '' , ' code.htm ' );
newWin.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( " 生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! " );
}
}
}
}
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( " 您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试 " );
return false ;
}
var clip = Components.classes[ ' @mozilla.org/widget/clipboard;1 ' ].createInstance(Components.interfaces.nsIClipboard);
if ( ! clip)
return ;
var trans = Components.classes[ ' @mozilla.org/widget/transferable;1 ' ].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-string;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);
}
}
< / script>
好了,经过如上几步后,你的文章中就加入了运行代码功能了。
看看下面的运行功能:
你可点击测试一下