WordPress窗口管理器按钮样式

debugcn 发表于 Dev

该死的

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

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

这段代码为我提供了窗口，但是我找不到用于更改按钮的任何选项。一定有东西，或者应该有东西！？甚至尝试更改样式（某些样式随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;'
}

您有机会添加这样的样式不是很好吗？当然，您可以更改颜色。

该死的

最终使用了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',
    });

因此，这是您可能会发现的最糟糕的代码解决方案，但结果看起来几乎像期望的那样：