4

我正在开发 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 :)

4

3 回答 3

5

如果你真的想隐藏（而不是禁用）元素，你可以使用

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

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

于 2014-05-07T18:59:45.040 回答
3

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()
        }
    }
}
于 2016-01-19T15:15:47.973 回答
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、对话框定义 API。

于 2013-06-12T07:52:14.533 回答