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

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

首先给大家推荐一款叫做《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: 

本文共 8 个回复

  • IT疯狂女 2015/01/26 16:11

    代码大大无处不在

  • Feng 2015/01/26 19:50

    大神,最后那段代码是放在哪个文件里的,麻烦告诉一下,谢谢

    • Specs 2015/01/26 20:47

      @ Feng 额 最后那个不是。。只是文件目录结构。。。

  • 梦想网络 2015/02/01 16:30

    代码太长,还是自己慢慢写吧

  • joge 2015/08/14 17:01

    按照文章的操作了 之后 没有行号啊 就是代码行号 不会出现~~还有一个问题就是“TinyMCE” 是插件么

  • 游客1 2016/04/03 11:19

    我把按钮编辑进编辑器后,没有高亮效果。。。是还要安装Crayon Syntax Highlighter插件吗?

  • snow 2016/11/04 13:37

    很好用,配合prims很棒,帮我解决了转义问题

发表评论