prism.js是国外的一款js插件，我们可以通过这个插件实现Wordpress文章编辑器添加代码功能。此文内容由《为WordPress 后台编辑器添加一键插入代码功能》整理而来
下载JS和CSS文件
下载地址：https://prismjs.com/download.html
进入首页后点击download，然后就进入自定义的页面了
选择你要的主题，代码语言，还有js插件包，然后点最下面的两个大按钮下载获得prism.js和prism.css两个文件
创建htm文件
我创建的文件以code_plugin.htm为例
<!DOCTYPE html>
<html>
<head>
<title>插入代码块</title>
<meta charset="utf-8">
<link rel="stylesheet" href="此处为下载的CSS文件资源存放地址，例：prism.css">
<style>
body { background-color: #eee;font-size: 14px; }
.h {
height: 40px;
line-height: 40px;
padding: 0 10px;
overflow: hidden;
}
#copy,
#render {
text-decoration: none;
float: right;
font-size: 12px;
background-color: #fa565a;
border-radius: 3px;
padding: 5px 20px;
line-height: normal;
color: #fff;
margin-top: 10px;
margin-left: 10px;
}
#render {
background-color: #fff;
border:1px #ccc solid;
color: #333;
}
.box {
width: 600px;
min-height: 600px;
background-color: #fff;
margin: 50px auto;
padding-bottom: 20px;
}
#preview,
textarea {
display: block;
width: 560px;
min-height: 200px;
border:1px #ccc solid;
padding: 10px;
margin: 10px auto;
}
#box { height: 40px;min-height: initial; }
textarea:focus { outline: 0; }
</style>
</head>
<body>
<div class="box">
<div class="h">
选择语言：<select id="lang"></select>
<input type="checkbox" id="showLine" checked="checked">显示行号</input>
<a href="javascript:;" id="copy">插入代码</a>
<a href="javascript:;" id="render">预览</a>
</div>
<textarea id="code" placeholder="粘贴源代码"></textarea>
<textarea id="box" placeholder="复制生成后的代码"></textarea>
<p style="margin:10px;">预览：</p>
<div id="preview"></div>
</div>
<script src="此处为下载的JS文件资源存放地址，例：prism.js"></script>
<script>
var str;
var render = document.getElementById("render");
var code = document.getElementById("code");
var copy = document.getElementById("copy");
var box = document.getElementById("box");
var lang = document.getElementById("lang");
var preview = document.getElementById("preview");
var la = ["html", "js", "css", "php", "go", "python"];
for (var i =0; i < la.length; i++) {
str = document.createElement("option");
str.value = la[i]
str.innerHTML = la[i];
lang.appendChild(str);
}
render.addEventListener("click", function () {
var content = code.value;
content = content.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
if (document.getElementById("showLine").checked) {
str = '<pre class="line-numbers"><code class="language-'+ lang.value +'">';
} else {
str = '<pre><code class="language-'+ lang.value +'">';
}
str += content;
str += "</code></pre>";
box.value = str;
preview.innerHTML = str;
Prism.highlightAll(true);
}, false);
copy.addEventListener("click", function () {
render.click();
codeNode = document.getElementById('box')
code = codeNode.value;
window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器
window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框
});
</script>
</body>
</html>创建JS文件
代码如下：我创建的JS文件命名为code_plugin.js
按钮图片为：
(function($) {
tinymce.create('tinymce.plugins.specs_code_plugin', {
init: function(editor, url) {
editor.addButton('specs_code_plugin', {
title: '插入代码', // 鼠标放在按钮上时的提示文字
image: '此处为插入按钮图片资源地址，例：code.png',
cmd: 'tdsk_command' // 点击时执行的方法
});
editor.addCommand('tdsk_command', function() {
editor.windowManager.open(
{
title: '插入代码', // 对话框的标题
file: '此处为创建的htm文件地址，例：code_plugin.htm', // 放置对话框内容的HTML文件
width: 700, // 对话框宽度
height: 600, // 对话框高度
inline: 1 // Whether to use modal dialog instead of separate browser window.
}
);
});
}
});
tinymce.PluginManager.add('specs_code_plugin', tinymce.plugins.specs_code_plugin);
})(jQuery);functions.php添加代码
//插入代码
function spces_code_plugin() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'specs_mce_external_plugins_filter' );
add_filter( 'mce_buttons', 'specs_mce_buttons_filter' );
}
}
add_action('admin_head', 'spces_code_plugin');
function specs_mce_external_plugins_filter($plugin_array) {
$plugin_array['specs_code_plugin'] = '此处为创建的JS文件资源地址,例：code_plugin.js';
return $plugin_array;
}
function specs_mce_buttons_filter($buttons) {
array_push($buttons, 'specs_code_plugin mce-i-wp_code');
return $buttons;
}
//插入代码end注意：
引入后如果代码并没有变化。。那是因为这个插件默认是对带有class*=language-的code标签和pre起作用的，而你的编辑器生成的code和pre可能没有这个class，进入prims.css。。把里面的[class*="language-"]全部删掉，保存一下，然后再去刷新页面。
转载请注明：思享SEO博客 » WordPress文章编辑器添加代码功能