明凯博客

关注网站技术,一个特立独行的程序员

wordpress加入运行代码功能完美版

运行代码功能估计需要的人不多,但是博客写前端代码的人应该就需要,因为能够预览代码这样子体验非常好。

运行代码功能预览:

代码预览

网上有很多这样子的例子。但是基本上都是错误的,反正我没要找到正确的。

主要原因就是wordpress会自动添加分段标签p,br等等,导致代码不能够预览。

相信大家都对这个wordpress自动机制感到很绝望。

下面我们来看看怎么来做。

一、首先准备JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function runCode(objid) {
	var winname = window.open('', "_blank", '');
	var obj = document.getElementById(objid);
	winname.document.open('text/html', 'replace');
	winname.opener = null; 
	winname.document.write(obj.value);
	winname.document.close();
}
function selectCode(objid){
    var obj = document.getElementById(objid);
    obj.select();
}

二、PHP代码:

1
2
3
4
5
6
7
8
9
10
11
function to_run_code ($attrs,$content='') {
  extract(shortcode_atts(array(
    'id' => 'runcode'
  ), $attrs));
 
  if(empty($content)) return;
  else {
    return '<textarea id="'.$id.'">'. $content . '</textarea> <br /> <input type="button" value="运行代码" data-runid="'.$id.'" onclick="toruncode(this)" />';
  } 
}
add_shortcode('runcode', 'to_run_code');

上面的代码就是我说的网上的大多数办法,这样子没法逃避wordpress的自动过滤机制,如果代码预览中js存在html标签,那么运行代码将失效。

经过我多次研究,写了一个自动替换的短代码方案,这个实在后期进行匹配过滤的。完全可以所见所得。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 新版新窗口预览源码开始
$RunCode = new RunCode();
add_filter('the_content', array(&$RunCode, 'part_one'), -500);
add_filter('the_content', array(&$RunCode, 'part_two'),  500);
unset($RunCode);
class RunCode
{
    var $blocks = array();
	function part_one($content)
    {
		$str_pattern = "/(\< -runcode(.*?)\>(.*?)\< \/-runcode\>)/is";
		if (preg_match_all($str_pattern, $content, $matches)) {
			for ($i = 0; $i < count($matches[0]); $i++) {
				$code = htmlspecialchars($matches[3][$i]);
				$code = preg_replace("/(\s*?\r?\n\s*?)+/", "\n", $code);
				$num = rand(1000,9999);
				$id = "runcode_$num";
				$blockID = "<p>++RUNCODE_BLOCK_$num++";
				$innertext='<h3>代码预览</h3><textarea id="'.$id.'" class="runcode">'. $code . '</textarea><input type="button" value="运行代码" onclick="runCode(\''.$id.'\')"/><input style="margin-left: 47px;"type="button" value="全选代码" onclick="selectCode(\''.$id.'\')"/>';
				$this->blocks[$blockID] = $innertext;
				$content = str_replace($matches[0][$i], $blockID, $content);
			}
		}
		return $content;
	}
    function part_two($content)
    {
        if (count($this->blocks)) {
            $content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content);
            $this->blocks = array();
        }
        return $content;
    }
}
// 新版新窗口预览源码结束

注:这里的runcode前面的-是我加起以免被运行用的。

三、最后就是样式了:

1
2
3
4
5
6
7
8
9
10
.runcode{
width: 550px;
height: 150px;
font-size: 10pt;
padding: 10px;
background-color: #EEEEEE;
margin-bottom: 5px;
border-radius: 5px;
min-width: 625px;
max-width: 625px;}

四、使用方法:

编辑文章时,切换到html模式,输入类似代码:

1
2
3
< -runcode id="r1">
<script>alert("明凯博客测试短代码功能");</script>
< -/runcode>

注:这里的runcode前面的-是我加起以免被运行用的。

输入的是runcode而不是-runcode。

要记住id不要相同了啊。

其余的wordpress会给你自动生成。

大家可以在我博客里进行测试。

, ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注