首页 » 开源/框架 » WordPress » 正文

WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法

| WordPress | 18 条评论 | (6评) |

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

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

Crayon Syntax Highlighte

之前我一直在用这款插件，感觉还是不错的，但是最近觉得这个插件需要在页面中加载好几个额外的JS、css文件，会影响页面的加载速度，所以就把插件停用了。

但是停用了问题就来了，在编辑器中复制过来的代码直接贴到Wordpress的编辑器中之后，之前的代码缩进等等格式都没有了，看起来很不爽。所以就想自己给 TinyMCE 添加这样一个按钮，点击之后可以弹出对话框，贴代码用。

之前曾分享过一篇关于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;
}

最后涉及到的文件如下（此处不是代码，只是目录结构 :evil: ）：

Theme Folder/js/
    mce_code_plugin.js
    mce_code_plugin.htm
    code.png

Theme Folder/
    functions.php

好了，只需要上面几步，现在到后台编辑一篇文章看看，编辑器上是不是已经多出来我们刚刚创建的按钮了？

TinyMCE

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

tinymce dialog

粘贴进去代码之后：

tinymce-code

Complete !

 

PS：不要说你那个弹出框怎么那么丑啊什么的，自己编辑样式去  :twisted: 

附：给文本模式编辑栏添加按钮的方式如下：

<?php
function specs_add_quicktags(){
    if(wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton('alert-success','成功背景','<div class="alert alert-success">','</div>');
    </script>
<?php
    }
}
add_action('admin_print_footer_scripts','specs_add_quicktags');
?>

本文共 18 个回复

  • 尼柯小筑 2020/09/01 16:12

    你好 如果我是想把它(按钮)添加到文本编辑栏 又该怎么做

    回复

    • Specs 2020/09/07 14:02

      @ 尼柯小筑 你所说的文本编辑栏是指哪里呢？

      回复

      • 尼柯小筑 2020/09/08 00:33

        @ Specs WP编辑器 分为可视化和文本(html)两个编辑模式 你这个办法很不错 但是只能添加到可视化按钮栏 在文本编辑模式下 是用不了的 像我们好多人是喜欢在文本编辑模式下写文章的

        回复

12

发表评论

友情链接