不知道是不是我咕噜寡闻,在cnblogs上看到别人发表的js代码可以加一个“运行代码”按钮,这样看代码的人就不用把代码拷贝下来就知道了预览效果。
可是我在csdn后台添加文章上面就是没有发现这个功能。
今天在浏览这位大哥的blog(http://blog.csdn.net/zswang/)上的这篇文章的时候,让我眼睛一亮,莫非csdn早就有这个功能了?
回去尝试修改自己的文章,没有发现csdn添加文章后台有这个功能,baidu了一下“csdn 运行代码”发现了一个有价值的链接:http://blog.csdn.net/by20081213/archive/2009/02/05/3863264.aspx介绍怎么在csdn写blog的时候实现一个“运行代码”功能,自己摸索了一下,觉得可行, 效果就是这样的:http://blog.csdn.net/sunxing007/archive/2009/05/14/4187038.aspx
点“运行代码”就会在新窗口中预览代码。
实现过程是这样的:
在修改blog的时候,点下面红色的那个圈圈“html”,弹出HTML源代码编辑器,在这里可以写js代码和html代码,首先添加一个按钮:
<button>运行代码</button>
或者一个超链接,如果是超链接,用伪协议赋值href。
<a href="javascript:viewPage(document.getElementsByTagName('textarea')[0].value)">运行代码</a>
然后添加一段js代码:<script type="text/javascript"><!--
//这段代码也是察看zswang的blog的源代码拷贝过来的。
function viewPage(html) {
var page = window.open('', '', '');
page.opener = null;
page.document.write(html);
page.document.close();
}
//我发现不能直接给button添加onclick,否则你的代码会被蹂躏,
//所以我不知道zswang是怎么做到给button直接onclick的。
//也不能给元素一个id,会被屏蔽掉。
var btns = document.getElementsByTagName('button');
btns[0].onclick = function(){
    viewPage(document.getElementsByTagName('textarea')[0].value);
}
// --></script>然后点“更新”返回,点“发表文章”,再回头阅读自己的文章,就可以预览了。
前几个月就这个功能差点让我想把blog搬家到cnblogs,现在看来不用了。
是不是有更高级的玩法,我不知道,要是我咕噜寡闻,大家不要笑话我。^_^

解决方案 »

  1.   

    最终效果
    http://blog.csdn.net/sunxing007/archive/2009/05/14/4187038.aspx
      

  2.   

    要是JavaScript版块有51js一样的运行代码就更好了.
      

  3.   

    那是因为CSDN博客升级过一次,之前没有做什么过滤,那文章就是之前发的
      

  4.   

    其实可以换个思路
    虽说csdn不支持
    咱们还是可以自己动手的嘛
    我的博客
    http://blog.csdn.net/wtcsy/archive/2009/05/15/4187192.aspx
    这个是可以运行的..............
      

  5.   

    支持。
    csdn js板能像51js那样帖子里直接运行代码就方便多了~
      

  6.   

    蓝色理想  也是很早以前就有那种直接运行js,或者html的功能了