Question

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

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

这段代码给了我窗口但我找不到任何更改按钮的选项。必须有东西，或者它应该是某种东西！？甚至尝试使用!important更改样式（某些样式添加了javascript）内联样式但没有效果......

( 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

使用我在此处找到的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',
    });

所以这是你可能找到的最差的代码解决方案，但结果看起来几乎是所希望的：

Answer 2

检查所需的按钮并将类添加到按钮定义中：

示例：

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

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

Wordpress窗口管理器按钮样式

2 个答案: