Блог

Я убрал диалоговое окно загрузки CKEditor, чтобы сделать его немного менее сложным для обычного пользователя с одним пальцем. Для достижения этой цели я использовал приведенный ниже код

 CKEDITOR.on( 'dialogDefinition', function( ev )
{ console.log(ev.data);
  // Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

  // Check if the definition is from the dialog we're
  // interested in (the 'image' dialog). This dialog name found using DevTools plugin
  if ( dialogName == 'image' )
  {
     // Remove the 'Link' and 'Advanced' tabs from the 'Image' dialog.
     dialogDefinition.removeContents( 'Link' );
     dialogDefinition.removeContents( 'advanced' );


    var uploadTab = dialogDefinition.getContents( 'Upload' );
    var uploadButton = uploadTab.get( 'uploadButton' );
    uploadButton[ 'label' ] = 'Upload to your Media Gallery';


     // Get a reference to the 'Image Info' tab.
     var infoTab = dialogDefinition.getContents( 'info' );

    // ADD OUR CUSTOM TEXT
    infoTab.add(
      {
        type : 'html',
        html : 'Click the button to select your image from your gallery,<br> or use the UPLOAD tab to upload a new image.'
      },
      'htmlPreview'
    );

    var imageButton = infoTab.get( 'browse' );
            imageButton[ 'label' ] = 'Select Image';

            //I HAVE DONE THIS TO HIDE BUT I WOULD LIKE TO REALLY HIDE!
            var urlField = infoTab.get( 'txtUrl' );
    urlField[ 'style' ] = 'display:none; width:0;';


     // Remove unnecessary widgets/elements from the 'Image Info' tab.         
    infoTab.remove( 'ratioLock' ); 
    infoTab.remove( 'txtHeight' );          
    infoTab.remove( 'txtWidth' );          
    infoTab.remove( 'txtBorder'); 
    infoTab.remove( 'txtHSpace'); 
    infoTab.remove( 'txtVSpace'); 
    infoTab.remove( 'cmbAlign' );  
    //CANT REMOVE IT AS IT IS REQUIRED BY THE CODE TO PREPARE THE PREVIEW WINDOW
            //infoTab.remove( 'txtUrl' ); 
    infoTab.remove( 'txtAlt' ); 
  }
});
 

Это позволяет достичь почти всего, что я хочу, за исключением поля urlText. Я успешно сделал его невидимым, изменив его стиль, но содержащий его элемент все еще существует, CKEditor использует множество таблиц для компоновки своих диалогов, что означает, что это влияет на компоновку других элементов .. см. Изображение, оранжевое поле — это место, где теперь находится невидимое поле urlText.

Если я использую метод удаления, он красиво исчезает, и макет сбрасывается, но тогда диалог не будет работать, я полагаю, потому что область предварительного просмотра захватывает URL-адрес изображения из этого поля.

CKEditor упростил диалог загрузки

Кажется, я не могу найти способ скрыть этот элемент, включая все окружающие его контейнеры. Ни один из методов, которые я могу найти в документах, похоже, не работает.

Есть идеи ..?

Спасибо!

Вы можете использовать метод afterInit или [onLoad][1] следующим образом:

 if(dialogName == 'image') {

    //dialogDefinition.afterInit= function () {
    // or
    dialogDefinition.onLoad= function () {
        infoTab.remove( 'txtUrl' ); 
    }
}
 

Хотя этого afterInit метода больше нет в документах, я бы попробовал 😉

 // this works to hide the url field, and nothing is broken
CKEDITOR.on( 'dialogDefinition', function( ev ) {
            var dialogName = ev.data.name;
            if ( dialogName == 'image' ) {
                var dialogDefinition = ev.data.definition;
                dialogDefinition.onLoad = function () {
                    this.getContentElement("info", "txtUrl").getElement().setStyle("display", "none");
                }
            }
        });