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

我已经去掉了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' ); 
  }
});

CKEDITOR.on（'dialogDefinition'，函数（ev）
{console.log（ev.data）；
//从事件数据中获取对话框名称及其定义。
var dialogName=ev.data.name；
var dialogDefinition=ev.data.definition；
//检查定义是否来自我们正在创建的对话框
//感兴趣（图像对话框）。此对话框名称使用DevTools插件找到
如果（dialogName=='image'）
{
//从“图像”对话框中删除“链接”和“高级”选项卡。
dialogDefinition.removeContents（'Link'）；
dialogDefinition.removeContents（'advanced'）；
var uploadTab=dialogDefinition.getContents（'Upload'）；
var uploadButton=uploadTab.get（'uploadButton'）；
uploadButton['label']='Upload to your Media Gallery'；
//获取对“图像信息”选项卡的引用。
var infoTab=dialogDefinition.getContents（'info'）；
//添加我们的自定义文本
infoTab.add(
{
键入：“html”，
html:“单击按钮从图库中选择图像，
或使用“上载”选项卡上载新图像。”
},
“htmlPreview”
);
var imageButton=infoTab.get（'browse'）；
imageButton['label']=“选择图像”；
//我这样做是为了隐藏，但我真的想隐藏！
var urlField=infoTab.get（'txtUrl'）；
urlField['style']='display:none；width:0；'；
//从“图像信息”选项卡中删除不必要的小部件/元素。
infoTab.remove（'ratioLock'）；
infoTab.remove（'txtHeight'）；
infoTab.remove（'txtWidth'）；
infoTab.remove（'txtBorder'）；
infoTab.remove（'txtHSpace'）；
infoTab.remove（'txtVSpace'）；
infoTab.remove（'cmbAlign'）；
//无法删除它，因为代码需要它来准备预览窗口
//infoTab.remove（'txtUrl'）；
infoTab.remove（'txtAlt'）；
}
});

这几乎实现了我想要的一切，除了urlText字段。我已经成功地改变了它的样式，使它不可见，但它的包含元素仍然存在，CKEditor使用大量的表来布局它的对话，这意味着它会影响其他元素的布局。请参见图，橙色框是现在不可见的urlText字段所在的位置

如果我使用remove方法，它会很好地消失，布局也会重置，但是对话框不会工作，我相信这是因为预览区域会从这个字段获取图像的URL

我似乎找不到一种方法来隐藏这个元素，包括它周围的所有容器。我在文档中找到的方法似乎都不管用

有什么想法吗

---

谢谢

您可以像这样使用

afterInit

或

[onLoad][1]

方法：

if(dialogName == 'image') {

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

---

虽然，

afterInit

方法不再出现在文档中，但我会尝试一下；）

你好，谢谢你的回答。这不会有帮助，虽然我不能删除元素，因为它打破上传对话。我认为该元素需要存在，因为预览窗口可能会从该元素中提取图像的URL。简单地隐藏对话框（或css显示：无）是否有帮助？通过css隐藏是不好的，已经尝试过了，因为包含的表元素仍然呈现，并且最终显示错误。

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