WordPress的编译器功能扩展

//php代码如下:
//向文章编辑器的Visual区添加自定义按钮,js文件存放在wp-content/plugins/文件夹下 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'] = plugins_url().'/mce-button.js'; return $plugin_array; } function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; }

  以下为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: 'Error', value: 'notification error'},
                                {text: 'Success', value: 'notification success'},
                                {text: 'Info', value: 'notification info'},
                                {text: 'Question', value: 'notification question'},
                                {text: 'Waring', value: 'notification waring'}
                            ]
                        },
                        {
                            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 ? ' ' : '');
                        editor.insertContent(sp + '<div class="'+ e.data.titlewrap +'">' + e.data.titlecontent + '</div>' + sp + '<p></p>' );
                    }
                });
            }
        },
        {
            text: '自定义链接',
                onclick: function() {
                editor.windowManager.open( {
                    title: '自定义链接',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: '链接地址',
                            value: 'https://www.drivereasy.com/DriverEasy_Setup.exe'
                        },
                        // {
                        //     type: 'textbox',
                        //     name: 'custom_js_code',
                        //     label: '自定义js代码',
                        //     value: 'onclick="ga(\'send\',\'event\',\'download\',\'click\',\'kbde-dedownload-\',1.00,{\'nonInteration\':1});)"',
                        //     multiline: true,
                        //     minWidth: 300,
                        //     minHeight: 100
                        // },
                        {
                            type: 'textbox',
                            name: 'custom_links_description',
                            label: '链接名称',
                            value: '',
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.custom_links_description.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? ' ' : '');
                        editor.insertContent(sp + '<a rel="nofollow" href="' + links + '" onclick="ga(\'send\',\'event\',\'download\',\'click\',\'kbde-dedownload-  \',1.00,{\'nonInteration\':1});)"  >' + custom_links_description + '</a>' + sp + '<p></p>');
                    }
                });
            }
        },
        {
            text: '超链接',
                onclick: function() {
                editor.windowManager.open( {
                    title: '超链接',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: '链接地址',
                            value: 'https://www.drivereasy.com/DriverEasy_Setup.exe'
                        },
                        {
                            type: 'textbox',
                            name: 'custom_js_code',
                            label: '自定义js代码',
                            value: 'onclick="ga(\'send\',\'event\',\'download\',\'click\',\'kbde-dedownload-  \',1.00,{\'nonInteration\':1});)"',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            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 ? ' ' : '');
                        editor.insertContent(sp + '<a rel="nofollow" '+e.data.custom_js_code+'    href="' + e.data.links +'">' + code + '</a>' + sp + '<p></p>');
                    }
                });
            }
        }
    ]
});
});
})();

  注意js代码中调用数据时记得加上e.data.name,

效果如下:

 

posted @ 2017-12-28 15:13  Ryan_zheng  阅读(344)  评论(0编辑  收藏  举报