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

I'm working on a plugin in CKEditor which have as a goal to hide or show element depending on which of my check box is checked. I have those element defined :

我正在使用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'
                        }
                    ]
                }
            ],

so now what i would like to do is to hide no disable the text input with the label and print it only when the box is checked. So i've seen that i should use something like that :

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

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

but the thing is i don't want to disable it i want to hide and then print it if the user check the box (which is why i put a onClick function in my checkbox). i've tryed to use the hide() function but it doesn't work and also the setAttribute('style','display : none;') Tia :)

但事情是我不想禁用它我想隐藏然后打印它如果用户选中该框(这就是为什么我在我的复选框中放置一个onClick功能)。我已经尝试使用hide()函数,但它不起作用,还有setAttribute('style','display:none;')Tia :)

3 个解决方案

#1

Your checkbox definition is correct but there's no such thing like onClick property in dialog uiElement definition. All you got to do is to attach some listeners and toggle your field. Here you go:

您的复选框定义是正确的,但是在对话框uiElement定义中没有像onClick属性这样的东西。你所要做的就是附上一些听众并切换你的领域。干得好:

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();
        }

        ...
    }
});

More docs: uiElement API, dialog definition API.

更多文档:uiElement API,对话框定义API。

#2

If you actually want to hide (and not disable) the element you can do this using

如果你真的想要隐藏(而不是禁用)元素,你可以使用它

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

The extra getElement() call returns the litteral DOM object for your contentElement object, so you can call hide()/show() at will on it.

额外的getElement()调用返回contentElement对象的litteral DOM对象,因此您可以随意调用hide()/ show()。

#3

The onClick properties is available and does work on uiElement although it is not documented. The biggest problem is the definition of "this" is not the same inside the event than other place in the config. You first have to get the dialog to get other fields:

onClick属性可用,并且可以在uiElement上运行,尽管没有记录。最大的问题是“this”的定义在事件内部与配置中的其他地方不同。首先必须获取对话框以获取其他字段:

{
    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()
        }
    }
}

#1