Question

我已经删除了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字段存在于哪里。

如果我使用remove方法它会很好地消失并且布局重置但是对话不会起作用，我相信因为预览区域从该字段中获取图像的URL。

CKEditor simplified upload dialogue

我似乎无法找到一种方法可以隐藏该元素，包括其周围的所有容器。我在文档中找不到的方法似乎都不起作用。

任何想法......？

谢谢！

Answer 1

您可以像这样使用afterInit或[onLoad][1]方法：

if(dialogName == 'image') {

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

虽然afterInit方法不再在文档中，但我会尝试一下;）

Answer 2

// 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");
                }
            }
        });

隐藏或删除CKEditor上传对话框中的urlText字段

2 个答案: