首页 » 开源/框架 » 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 个回复

  • 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很棒，帮我解决了转义问题

    回复

  • 龙笑天 2017/11/08 11:57

    非常棒的教程，已经用上了~

    回复

  • 绿软库 2017/12/04 13:09

    好像不多的功能

    回复

  • 语云 2018/01/01 15:59

    你好，最后一步代码放进functions文件后，网站就一片空白打不开了。前面的步骤完全正确，请问怎么解决？wordpress主题用的知更鸟

    回复

    • Specs 2018/01/03 22:26

      @ 语云 最后一段代码是指那段PHP代码吗

      回复

  • 阿龙 2018/03/23 15:59

    表示没效果呀，还有按钮是我自己截取的图片code.png

    回复

12

发表评论

友情链接