javascript - Hide a text input on a dialog box of CKEditor - Stack Overflow

admin管理员组

文章数量:1278689

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 :

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 :)

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 :

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 :)

• javascript
• ckeditor
• hide

Share Improve this question Follow asked Jun 11, 2013 at 14:56 ponayzponayz 23711 gold badge44 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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:

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

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:

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.

本文标签： javascriptHide a text input on a dialog box of CKEditorStack Overflow