网站首页 » CMS » wordpress » wordpress 后台编辑器 TinyMCE 自定义按钮
上一篇:
下一篇:

wordpress 后台编辑器 TinyMCE 自定义按钮

前言

这是一篇很不错的文章,你可以从这篇文章里得到一个提高效率的方法,一个关于如何为 wordpress 后台自带的编辑器 tinymce 添加自定义按钮的方法,纯粹干货,行过路过,真的不要错过。

在写这篇文章的时候,我也把这个自主开发的,云库网制造的说它不是 wordpress 插件,但它又确确实实有插件的功能的两堆代码。不多说,是马是驴,拉出来溜溜就知道。代码如下,分两步。

代码案例

修改functions.php文件

给主题下的 functions.php 文件,添加如下一段代码。

// 按钮 PHP 代码 --- 云库网[http://yunkus.com]
add_action('admin_head', 'my_custom_mce_button');
function my_custom_mce_button() {
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_custom_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
function my_custom_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/yunkusedit.js';
    return $plugin_array;
}
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}
// 按钮 PHP 代码

注意,记得把这段代码放到<?php  ?>之间。不然什么都是白搭,这是第一步,如果眼尖的朋友应该看到了这段代码中引入了一个 edit.js , 接下来我们就进行下一步。

添加js文件

新建一个yunkusedit.js,在开文件,把下面一大段JS 代码放到里面就可以了。

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'wp_code',
type: 'menubutton',
menu: [
        {
            text: '标题样式',
            onclick: function() {
                editor.windowManager.open( {
                    title: '代码标签',
                    minWidth : 700,
                    body: [
                         {
                            type: 'listbox',
                            name: 'titlewrap',
                            label: '选择标题',
                            values: [
                                {text: 'H1', value: '1'},
                                {text: 'H2', value: '2'},
                                {text: 'H3', value: '3'},
                                {text: 'H4', value: '4'}
                            ]
                        },
                        {
                            type: 'textbox',
                            name: 'titlecontent',
                            label: '标题内容',
                            value: '请输入标题内容......',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var titlecontent = e.data.titlecontent.replace(/\r\n/gmi, '\n'),
                        titlecontent =  tinymce.html.Entities.encodeAllRaw(titlecontent);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<div class="para-title level-'+ e.data.titlewrap +'"><h' + e.data.titlewrap + ' ' + 'class="title-text"><i class="fa fa-bookmark-o"></i>' + e.data.titlecontent + '</h'+ e.data.titlewrap +'></div>' + sp + '<p></p>');
                    }
                });
            }
        },
        {
            text: '代码语言',
                onclick: function() {
                editor.windowManager.open( {
                    title: '代码标签',
                    minWidth : 700,
                    body: [
                         {
                            type: 'listbox',
                            name: 'lang',
                            label: '语言类型',
                            values: [
                                {text: 'HTML', value: 'html'},
                                {text: 'CSS', value: 'css'},
                                {text: 'JavaScript', value: 'javascript'},
                                {text: 'PHP', value: 'php'}
                            ]
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: '代码',
                            value: '请输入您的代码......',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.code.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<pre><code class="hljs' + ' ' + e.data.lang +'">' + code + '</code></pre>' + sp + '<p></p>');
                    }
                });
            }
        }
    ]
});
});
})();

yunkusedit.js 编辑好后就上传到主题目录下的js目录里。这样所有准备都已经做好了。最后一点你懂的,就是测试了。

代码效果

马上进入网站后台,点【写文章】,进入文章界面后,你看看编辑器的工具样是不是多了一个像下面这样的小按钮。

wordpress 后台为编辑器添加自定义按钮

如果有那恭喜你,你已经成功以了半。接下来你要做的就是点击它,测试下是不是有效果,如果可以的话,那么怎么才能改成自己需要的效果呢?这个…..就得靠你自己了,相信你照猫画虎的能力应该还是有的。预祝您一路顺风~~~。

在这里我还是分析下我自己写上面这个案例的作用吧,我所做的这个按钮点击后有两个菜单,一个是文章一些标题的预设 HTML 代码,第二个就是用于代码高亮的预设代码。虽然是简简单单的两个小功能,但在发文章时,还真让我省不少时间。之前我遇到要添加大标题的时候就从一个自己整理好的文档里把标题代码复制过来,切换到文本模式,然后把代码粘贴下去,再改下大标题内容,满满的都是泪呀,现在妈妈再也不用担心我发文章没效率了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/wp-tinymce-custom-button/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END