WordPress Html代码运行框插件应用详解

作者：袖梨 2022-06-25

插件并非本人原创，用到了代码高亮插件中的部分内容，并整合了zero clipboard复制到剪切板的js库，可以在后台编辑器中点击“”按钮添加需要运行的代码。前台自动生成代码运行框。

wordpress 代码运行框插件特点：

1.后台点击按钮弹出窗口，可以直接插入。
2.支持格式化html代码（格式化html输入框中不能直接写入js或者其他格式代码，容易导致内存不足）
3.前台代码运行框支持运行代码，复制代码（用zero clipboard实现，详细参考），另存代码（存在缺陷，只支持ie）的功能
4.前台样式自定义，代码运行框采用采用pre模拟，加属性contenteditable=true,样式可以自定义。
5.将代码插件化，只会在后台编辑器添加一个按钮，不影响升级，不影响页面载入速度。
wordpress 代码运行框插件的安装：1.下载pizi_run_code.zip从网站后台上传安装，或者解压后上传到wp-content/plugins文件夹，后台安装。
2.需要jquery支持，载入jquery库与zero clipboard库，注意路径（可用绝对地址）

代码如下 复制代码


3.载入js部分，可以放到原来的主题中的js文件中，或者新建js文件，载入文件要放到jquery后面

代码如下 复制代码

$(function() {
$(".runcode").attr("contentEditable", "true");
$(".runit").click(function() {
var code = $(this).parents(".code_contain").find(".runcode").text();
runCode(code);
});
$(".saveit").click(function() {
var code = $(this).parents(".code_contain").find(".runcode").text();
saveCode(code);
});

copyThis();
})

function runCode(code) {
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
winname.opener = null;
winname.document.write(code);
winname.document.close();
}
function saveCode(code) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.write(code);
winname.document.execCommand('saveas', '', 'code.htm');
winname.close();
}
var clip = null;
function copyThis() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);

$('.copyit').mouseover(function() {
var code = $(this).parents(".code_contain").find(".runcode").text();
clip.setText(code);
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
} else clip.glue(this);
clip.receiveEvent('mouseover', null);
});
}

4.添加css，加入style.css或者另存css文件

代码如下 复制代码

.code_contain{margin-top:10px;}
.code_contain .runcode{width: auto;max-height: 150px;overflow: auto;border: 1px dashed #7D9008;padding:3px;line-height:18px;outline:none;margin:auto;width:95%;padding:5px 10px;}
.code_contain p{width:95%;margin:auto;}
.code_contain .runit{margin-left:-10px;}
.code_contain .runit,.code_contain .copyit,.code_contain .saveit{background: none repeat scroll 0 0 #9BBB38;border-radius: 10px 10px 10px 10px;color: #FFFFFF;font-size: 12px;padding: 2px 10px;font-weight:normal;margin-right:7px;}
.code_contain .runit:hover,.code_contain .copyit:hover,.code_contain .saveit:hover{background:#E58712;box-shadow:0px 0px 20px #ddd;}
.code_contain .copyit.hover{background:#E58712;box-shadow:0px 0px 20px #ddd;}//鼠标移动到复制代码的按钮上的样式
.code_contain .code_notice{font-size:12px;padding-left:7px;}

相关文章

精彩推荐