如何给博客园加上运行代码功能
2009-05-02 22:49
387 查看
原创:冰极峰 转载请注明出处
对于运行代码这个功能,我之前也写过一篇文章,这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的,而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入,所以这里再啰嗦一下。
首先,在博客园中添加文章时,如果要用到代码运行功能,你需要将下面这段结构加入到文章中,你可能打开文章的HTML模式来添加这段代码,如下所示:
下面的是核心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>
好了,经过如上几步后,你的文章中就加入了运行代码功能了。
看看下面的运行功能:
你可点击测试一下
对于运行代码这个功能,我之前也写过一篇文章,这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的,而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入,所以这里再啰嗦一下。
首先,在博客园中添加文章时,如果要用到代码运行功能,你需要将下面这段结构加入到文章中,你可能打开文章的HTML模式来添加这段代码,如下所示:
/*代码运行框样式*/ .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>
好了,经过如上几步后,你的文章中就加入了运行代码功能了。
看看下面的运行功能:
你可点击测试一下
相关文章推荐
- 如何在博客园的文章/随笔中添加可运行的js代码
- 教你如何在博客园放“可运行"代码
- 给django admin加上在线编辑运行python代码的功能
- ”运行代码”功能是如何实现的?
- 给blog加上运行代码功能
- [转]教你如何在博客园放“可运行"代码
- 博客园 运行代码 功能 学习
- 教你如何在博客园放“可运行"代码
- [测试]看看博客园的代码显示功能如何
- 博客园如何运行代码
- 如何运行APUE中的代码?
- 如何获取代码运行时间
- iOS 如何查看一段代码运行的时间
- 如何给按钮加上链接跳转功能
- 如何修改博客园插入代码的默认代码大小? - 心得小记
- 如何能保证自己的功能代码不出纰漏
- 如何让网页打开就运行JS代码,不用onclick
- 【调试】jieba结巴分词功能在python 3上运行代码
- 如何在Visual Studio中运行和调试汇编代码