Скрыть ввод текста в диалоговом окне CKEditor

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

Правильно указан флажок, но нет таких вещь как 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 2

Если вы действительно хотите, чтобы скрыть (и не отключить) элемент, который вы можете сделать это с помощью

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

Вызов дополнительной getElement() возвращает litteral объект DOM для вашего объекта ContentElement, так что вы можете позвонить скрыть()/show() по желанию.

Answer 3

Свойства onClick доступны и работают на uiElement, хотя они не документированы. Самая большая проблема заключается в том, что определение «это» не одно и то же в событии, чем в другом месте в конфиге. Вы должны сначала получить диалоговое получить другие поля:

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