Wordpress window 管理器按钮样式

Question

在 wordpress 中创建了一个自定义 window，如下所示：

现在我需要按钮 INSERT 和 CANCEL（见上图）看起来像其他地方一样（见下图），如 CANCEL 和 Add Link

这段代码给了我 window 但我找不到任何更改按钮的选项。一定有什么，或者说应该有什么！？甚至尝试更改样式（某些样式添加了 javascript）内联样式 !important 但没有效果 ...

( function($) {
    tinymce.create( 'tinymce.plugins.hd_fancybox_button', {
        init: function( editor, url )  {

            editor.addButton( 'hd_fancybox_button', {
                icon: 'icons dashicons-icon',
                tooltip: 'Fancybox',
                cmd: 'plugin_command',
                image : url + '/img/popup-icon.png'
            });

            editor.addCommand( 'plugin_command', function() {
                editor.windowManager.open({
                    title: 'Fancybox',
                    width: 500,
                    height: 300,
                    inline: 1,
                    id: 'hd-fancybox-button-insert-dialog',
                    body: [
                        {
                            type    : 'textbox',
                            name    : 'title',
                            label   : 'Title',
                            classes : 'selected_image_title',
                        }, {
                            type    : 'button',
                            name    : 'button',
                            label   : 'Image',
                            text    : 'Image',
                            classes : 'upload_image_button'
                        }
                    ],
                    buttons: [{
                        text: 'Insert',
                        id: 'hd-fancybox-button-insert',
                        onclick: function( e ) {
                            insertImg(editor);
                            closeBox();
                        },
                    },
                    {
                        text: 'Cancel',
                        id: 'hd-fancybox-button-cancel',
                        onclick: 'close'
                    }],
                });

                appendInsertDialog();

            });

        }

    });

几个小时后，我发现我可以像

这样使用 style 属性

{
    text: 'Cancel',
    id: 'hd-fancybox-button-cancel',
    onclick: 'close',
    style: 'background-color:orange;border:lime 1px solid;position:absolute;left:0px;top:0px;'
}

你有机会像这样添加stlyes是不是很棒？当然你可以改变颜色...

Answer 1

检查您想要的按钮并将类添加到您的按钮定义中：

示例：

{
  text: 'Insert',
  id: 'hd-fancybox-button-insert',
  classes: 'button button-primary',
  onclick: function( e ) {
    insertImg(editor);
    closeBox();
  },
}

我只将它添加到插入按钮，因为它是对话框的主按钮。

Answer 2

最终使用了我在这里找到的 style 属性：http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.Button 喜欢：

{
    text: 'Cancel',
    id: 'hd-fancybox-button-cancel',
    onclick: 'close',
    style: 'background-color:white;border:none;'
}

并且在 appendInsertDialog(); 函数的末尾我添加了

    $('#hd-fancybox-button-cancel').css({
        'position'  : 'absolute',
        'left'      : '20px'
    }).children('button').css({
        'color'     : '#a00'
    });

    $('#hd-fancybox-button-insert').css({
        'position'  : 'absolute',
        'left'      : 'auto',
        'right'     : '20px',
    });

所以这是您可能会找到的最糟糕的代码解决方案，但结果看起来几乎符合预期：

Wordpress window 管理器按钮样式

Wordpress window manager button styling

wordpress

tinymce

tinymce-4

tinymce-3