首先给大家推荐一款叫做《Crayon Syntax Highlighter》的代码高亮插件，支持很多语音，而且提供了非常多的设置，切换主题，自定义样式、字体等等，功能十分强大。

启用后，编辑器会多出一个按钮，点击后弹出一个对话框，可以粘贴代码：

crayon-synax-highlighter-code[1]

之前我一直在用这款插件，感觉还是不错的，但是最近觉得这个插件需要在页面中加载好几个额外的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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }
     
        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]

点击按钮，弹出下面的对话框：

tinymce-dialog[1]

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。