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

我已经剥离了CKEditor的上传对话框，使其对于普通单指用户来说不那么让人望而生畏。我已经利用下面的代码来实现这一点隐藏或删除CKEditor上的urlText字段上传对话框

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

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

任何想法..？

谢谢！

来源

2014-06-25 Rolf Herbert

可以使用afterInit或[onLoad][1]方法是这样的：

if(dialogName == 'image') { 

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

虽然，afterInit方法是在文档不再，我想给它一个尝试;）有

来源

2014-06-25 11:56:38

您好，感谢答案。这不会帮助，因为我不能删除元素，因为它打破了上传对话框。我认为元素需要在那里，因为预览窗口可能会从该元素中提取图像的URL。 –

简单地隐藏对话框（或CSS显示：无）是不是有帮助？ –

通过CSS隐藏并不好，已经尝试过了，因为包含的表格元素仍然呈现，并且最终会出现螺旋显示。 –

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

回答

相关问题