0

在 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;'
}

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

在此处输入图像描述

4

2 回答 2

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',
    });

因此，这可能是您能找到的最糟糕的代码解决方案，但结果看起来几乎如您所愿： 在此处输入图像描述

于 2015-10-27T13:00:45.703 回答
0

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

例子：

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

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

于 2015-10-27T10:32:32.207 回答