WordPress 免插件实现运行代码框

  和代码接触多了,难免需要在技术类文章中插入一些代码,但是这并不能满足所有的需求,如果能在 WordPress 中运行代码,那就更直观,更完美了,网上已经有个名为 runcode 的插件诞生,抱着能用代码搞定的就绝不用插件解决的精神,我自己研发了一种免插件的运行代码框,且这个方法支持在 Firefox 和 IE 等各版本浏览器,可以放心使用。自己动手,其乐无穷,下面就跟着我来试试吧。

  1、点此下载 run-code-OL.js 文件,解压并上传至服务器。

  2、在 WordPress 日志中插入以下代码:

<script src="保存 run-code-OL.js 的地址" type="text/javascript" charset="utf-8"></script>
<form>
<div align="center">
<textarea id="code" style="width:555px;height:255px;" cols="80" rows="15"></textarea>
<br />
<input type="button"onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;">
<input type="button"onclick=copycode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="复制代码" onclick="copycode(runcode3)">
<input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)">
提示:您可以先修改部分代码再运行 </div>
</form>
<br>

  3、在运行代码框中默认显示的代码添加在<textarea></textarea>之间即可。

  请看演示:


提示:您可以先修改部分代码再运行

  此方法万戈原创,如有雷同,纯属巧合。

本文已盖 70 层楼

  1. 回复 流年 说:

    目前都是在wlw下编辑

  2. 回复 Finger! 说:

    :roll: 感谢高手提供哦!谢谢谢

  3. 回复 蛋卷 说:

    以前在别的站见过

  4. 太忽悠人了。咋一看标题,还以为是允许WordPress代码呢,心想,PHP也能在线运行了?进来一看,原来是弹出一个窗口跑HTML和JS 啊。。。。

  5. 回复 杜小白 说:

    万戈···WORDPRESS专门户,哈哈···太感动了,每次我要搞一些关玩WORDPRESS的东西时,总在你这里找得到相当资料!赞一个!

  6. 回复 皓辰 说:

    真可爱的功能……

  7. 回复 daosee 说:

    刚用WP 没看明白 非常希望站长能指点一下 这个第二步 WP日志在哪里啊?》

  8. 多些博主啊!很实用! :mrgreen:

  9. 回复 alexblair 说:

    :roll: 不错的功能,很适合做DEMO用~谢谢~

  10. 回复 AnQ 说:

    这个功能很好用,看到很多博客都有这样的设置,不错

  11. 回复 catfly 说:

    挺有用的,谢谢分享~~

  12. 我JS还不懂呢。。。

  13. 不错啊。。。万戈越来越牛了。。。

  14. 回复 pwwang 说:

    这个有插件版吗?
    论坛和博客的差别越来越小

  15. 回复 Joe 说:

    :razz: 不错啊,非常支持

  16. 回复 Haven 说:

    这东西使用。我正在找

  17. 回复 随影 说:

    那个 运行的 代码 也是 楼主 研发的吗 ,哈哈 厉害!

  18. 回复 铵铵 说:

    :grin: 收藏到我的博客做备忘了,
    呵呵.

  19. wowow

    这正是我想要的! 感谢您八辈儿祖宗啊

  20. 回复 菠萝 说:

    我转了你的这篇文章,和你说一声,主要是为了以后查找方便。谢谢!

  21. 回复 菠萝 说:

    wordpress不支持上传文件的,你是如何实现上传文件并提供下载的?插件还是。。。

  22. 回复 菠萝 说:

    这个很帅,很早就想找个这东西,收藏了。

  23. 回复 resteven 说:

    这方法贼好呢。

  24. 回复 Maxsailor 说:

    这个功能好啊,正需要呢。

  25. 回复 boluor 说:

    哇哇,几天没来,这里又好多好多好玩的东东啊

  26. 回复 芒果 说:

    还是比较简单的方法~

  27. 回复 蛋王 说:

    我也写过一个,只能在ie下用,后来找不到了。。。 :mrgreen:

  28. 回复 alswl 说:

    这个在蓝色理想中很久前就有了,不过还是来支持一下

  29. 回复 whisperer 说:

    我倒是对你的代码框里的这段感兴趣 :roll:

  30. 回复 Showfom 说:

    只是HTML代码啦 :mrgreen: 哈哈

  31. 回复 大剑 说:

    虽然对我没啥用,不过还是个不错的东西

  32. 回复 小明猪 说:

    这个要支持,我用的到~ :wink:

  33. 回复 wulinfo 说:

    FF复制代码按钮失效,有种swf触发的方式可以解决所有浏览器

  34. 回复 卢松松 说:

    演示看不出什么效果呢?

  35. 回复 sleepy 说:

    复制代码和另存代码都不能用,我在chrome和opera下试的

  36. 回复 sleepy 说:

    要试试的,以后可能有用

  37. 回复 起衣 说:

    恩恩,越来越强大叻,来学习下

Leave a comment

ipage返佣

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析