Question

我正在使用CKEditor中的插件，其目的是隐藏或显示元素，具体取决于我选中了哪个复选框。我定义了那些元素：

contents :
            [
                {
                    id : 'tab1',
                    label : 'Configuration Basique',
                    elements :
                    [
                        {
                            type : 'checkbox',
                            id : 'check',
                            label : 'Vers une page web',
                            'default' : 'unchecked',
                            onClick : function(){

                            }
                        },
                        {
                            type : 'text',
                            id : 'title',
                            label : 'Explanation',
                        }    
                    ]
                },
                {
                    id : 'tab2',
                    label : 'Advanced Settings',
                    elements :
                    [
                        {
                            type : 'text',
                            id : 'id',
                            label : 'Id'
                        }
                    ]
                }
            ],

所以我现在要做的是隐藏禁用带标签的文本输入并仅在选中该框时打印它。所以我看到我应该使用类似的东西：

onLoad : function(){
                this.getContentElement('tab1','title').disable();
        },

但问题是我不想禁用它我想要隐藏然后打印它如果用户选中该框（这就是为什么我在我的复选框中放入onClick功能）。我试图使用hide（）函数，但它不起作用，还有setAttribute（'style'，'display：none;'） Tia：）

Answer 1

如果您确实要隐藏（而不是禁用）该元素，可以使用

执行此操作

this.getContentElement('tab1','title').getElement().hide();

额外的getElement（）调用返回你的contentElement对象的litteral DOM对象，所以你可以随意调用hide（）/ show（）。

Answer 2

您的复选框定义是正确的，但在对话框onClick定义中没有uiElement属性这样的内容。你所要做的就是附上一些听众并切换你的领域。你走了：

CKEDITOR.on( 'dialogDefinition', function( ev ) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if ( isThisYourDialog? ) {

        ...

        // Toggle your field when checkbox is clicked or dialog loaded.
        // You can also use getInputElement to retrieve element and hide(), show() etc.
        function toggleField( field, check ) {
            field[ check.getValue() ? 'enable' : 'disable' ]();
        }

        var clickListener;

        dialogDefinition.onShow = function() {
            var check = this.getContentElement( 'tab1', 'check' ),

                // The element of your checkbox.
                input = check.getInputElement(),

                // Any field you want to toggle.
                field = this.getContentElement( 'tab1', 'customField' );

            clickListener = input.on( 'click', function() {
                toggleField( field, check );
            });

            // Toggle field immediately on show.
            toggleField( field, check );
        }

        dialogDefinition.onHide = function() {
            // Remove click listener on hide to prevent multiple
            // toggleField calls in the future.
            clickListener.removeListener();
        }

        ...
    }
});

更多文档：uiElement API，dialog definition API。

Answer 3

onClick属性可用，虽然没有记录，但确实可以在uiElement上使用。最大的问题是＆＃34;这个＆＃34;的定义。事件内部与配置中的其他位置不同。首先必须获取对话框以获取其他字段：

{
    type: 'checkbox',
    id: 'check',
    label: 'check',
    onClick: function() {
        var dialog = this.getDialog()
        if(this.getValue()){
            dialog.getContentElement('tab1','title' ).disable();
        } else {
            dialog.getContentElement('tab1','title' ).enable()
        }
    }
}

在CKEditor的对话框中隐藏文本输入

3 个答案: