首先给大家推荐一款叫做《Crayon Syntax Highlighter》的代码高亮插件，支持很多语音，而且提供了非常多的设置，切换主题，自定义样式、字体等等，功能十分强大。
启用后，编辑器会多出一个按钮，点击后弹出一个对话框，可以粘贴代码：
![crayon-synax-highlighter-code[1]](http://www.foxsem.com/wp-content/uploads/2016/01/crayon-synax-highlighter-code1-595x300.png)
之前我一直在用这款插件，感觉还是不错的，但是最近觉得这个插件需要在页面中加载好几个额外的JS、css文件，会影响页面的加载速度，所以就把插件停用了。
但是停用了问题就来了，在编辑器中复制过来的代码直接贴到Wordpress的编辑器中之后，之前的代码缩进等等格式都没有了，看起来很不爽。所以就想自己给 TinyMCE 添加这样一个按钮，点击之后可以弹出对话框，贴代码用。
今天再来给大家分享一个给 TinyMCE 添加一个弹出对话框按钮的方法：
1) 在主题的 js 目录下新建一个 mce_code_plugin.js 文件，把下面代码贴进去：
(function($) {
tinymce.create('tinymce.plugins.specs_code_plugin', {
init: function(editor, url) {
editor.addButton('specs_code_plugin', {
title: "Insert Code", // 鼠标放在按钮上时的提示文字
image: url + '/code.png', // 按钮图标
cmd: 'tdsk_command' // 点击时执行的方法
});
editor.addCommand('tdsk_command', function() {
editor.windowManager.open(
{
title: "Insert Code", // 对话框的标题
file: url + '/mce_code_plugin.htm', // 放置对话框内容的HTML文件
width: 500, // 对话框宽度
height: 400, // 对话框高度
inline: 1 // Whether to use modal dialog instead of separate browser window.
}
);
});
}
});
tinymce.PluginManager.add('specs_code_plugin', tinymce.plugins.specs_code_plugin);
})(jQuery);
2) 再创建一个 mce_code_plugin.htm 的文件（名字要与上面JS中的相同），这个HTML文件里的内容大家可以自己定义，里面内容就是点击按钮后弹出的对话框的内容，我的里面添加了一个代码语言和一个 Textarea 用于粘贴代码，贴进去如下代码：
<html>
<head>
<!-- Disable browser caching of dialog window -->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<style type='text/css'>
body {
font-family: sans-serif;
font-size: 1.1em;
background-color: #F1F1F1;
color: #222;
}
.codeArea {
margin: 10px auto;
text-align: center;
}
textarea {
margin-top: 10px;
width: 100%;
height: 300px;
}
</style>
<script>
function htmlEntities(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function InsertValue() {
codeNode = document.getElementById('code')
code = codeNode.value;
if(code == '') {codeNode.focus(); return;}
lang = document.getElementById('lang').value;
code = "<pre class='" + lang + "'>" + htmlEntities(code) + "</pre><p></p>";
window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器
window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框
}
</script>
</head>
<body>
<form onsubmit="InsertValue();return false;">
<div class="codeArea">
<label for="lang">代码语言</label>
<select id="lang">
<option value="php">PHP</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
<option value="others">OTHERS</option>
</select>
<textarea id="code" autofocus></textarea>
<p><input type="submit" value="Insert" /></p>
</div>
</form>
</body>
</html>
3) 把按钮也放到 js 文件夹下（放到其他位置的时候需要修改JS中相关路径）
4) 打开 functions.php ，引入JS并注册按钮。在 funcitons.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'] = get_template_directory_uri() . '/js/mce_code_plugin.js';
return $plugin_array;
}
function specs_mce_buttons_filter($buttons) {
array_push($buttons, 'specs_code_plugin');
return $buttons;
}
最后涉及到的文件如下（此处不是代码，只是目录结构 ）：
Theme Folder/js/
mce_code_plugin.js
mce_code_plugin.htm
code.png
Theme Folder/
functions.php
好了，只需要上面几步，现在到后台编辑一篇文章看看，编辑器上是不是已经多出来我们刚刚创建的按钮了？
![tinymce-button[1]](http://www.foxsem.com/wp-content/uploads/2016/01/tinymce-button1.png)
点击按钮，弹出下面的对话框：
![tinymce-dialog[1]](http://www.foxsem.com/wp-content/uploads/2016/01/tinymce-dialog1-342x300.png)
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
