WordPress 免插件实现运行代码框

发布于：电脑网络, 精品推荐 4,101 次践踏

和代码接触多了，难免需要在技术类文章中插入一些代码，但是这并不能满足所有的需求，如果能在 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>之间即可。

请看演示：


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

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

  1. 我試用这段代码无论怎么修改都会出现
    Parse error: syntax error, unexpected '<' in /.../../functions.php on line 4

    是为何呢

  3. Pingback: TestCode | 测试

  7. Pingback: | 有心故我在

  9. Pingback: 运行代码框

  11. Pingback: 浩子d3主题共享及说明 – 大前端

  12. Pingback: WordPress 免插件实现运行代码框(转自 万戈) | Startend.Blog's

  15. 这方法太好了，不过我想问下，为什么那段js代码不放在文章页的模板里面呢？而且可以吧文本框直接整合到编辑器，那不是更好吗？

    • 呃。。。因为对我来说，不是每篇文章都需要的，所以没有整合到主题里，当然你也可以那么做，看个人需要了

  16. Pingback: 网站实现demo效果的方法 | 宝典网

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

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