Question

我想使用html5smartimage小部件而不让用户从他们的桌面上传图像，也避免使用内容搜索器。我创建了一个带有pathfield和html5smartimage输入的对话框。我已将“allowUpload”设置为false。我希望用户使用pathfield组件输入/选择图像，然后将其用作源图像引用，以在html5smartimage小部件中呈现图像。到目前为止我还没有成功，任何帮助/提示都会受到赞赏:)。这是我到目前为止所尝试的：

为pathfield和fileReferenceParamter设置相同的“name”值，希望将用户路径字段输入到smartimage中，但POST结果会发送两个“./srcImageReference”参数，从而产生一个路径域更改为jcr节点上的String []，从而每次都连接相同的路径。
我已经浏览了widgets.js来找到一个可用的事件函数，当一个drap-drop完成时会被调用，所以我可以使用pathfield中的值模拟一个类似的函数，但我找不到任何函数..

扩展smartimage组件并覆盖默认的drap-drop处理程序是唯一的选择吗？如果是这样我该怎么办呢。

感谢蝰蛇

Answer 1

html5smartimage有一个handleDrop( Object dragData )方法，当图像被拖放到其上时会调用该方法。我们可以通过pathfield的dialogselect事件来调用它。

本质上它就像伪装拖拽一样。 dragData有很多字段，但在这种情况下最重要的是图像路径和名称（来自：handleDrop方法中的console.log（））。因此，当在路径域中选择图像路径时，使用它的路径并创建hoax dragData对象并调用图像的handleDrop方法。

function(pathfield,path,anchor){ 
    var dialog = pathfield.findParentByType('dialog');
    var image = dialog.findByType('html5smartimage')[0]; 
    var pathArray = path.split('/'); 
    var imageName = pathArray[(pathArray.length-1)]; 
    var fakeDragData = {}; 
    var fakeRecord = {}; 
    fakeRecord.path = path; 
    fakeRecord.name = imageName; 
    fakeRecord.get = function(name){ return this[name]; }; 
    fakeDragData.records = new Array(fakeRecord); 
    fakeDragData.single = true; 
    image.handleDrop(fakeDragData);
}

这样，所有图像数据都由html5smart图像小部件本身存储在节点上，您根本不需要读取jsp中的pathfield值。

Answer 2

如果您只是想使用html5smartimage预览在路径域中选择的图像，您可以尝试这样的事情：

使用常规面板而不是html5smartimage，并使用其html属性在面板中显示图像。可以从路径域中的侦听器调用面板的body.update（）方法，并使用标记来创建预览图像。

<tab1 jcr:primaryType="cq:Panel" title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
  <ImagePathField jcr:primaryType="cq:Widget" fieldLabel="Select Image" 
           name="./imagePath" rootPath="/content/dam" xtype="pathfield">
    <listeners jcr:primaryType="nt:unstructured" 
       dialogselect="function(pathfield,currentpath,anchor) {

            //dialogselect event - fired when a selection 
            //is made using pathfield's browse dialog
            //get the sibling panel through the pathfield

            var previewPanel = pathfield.nextSibling();

            //update the html property of panel to contain the
            //image selected in the pathfield using panel body's update method

            previewPanel.body.update('<img style="max-width: 100%;display: block;
                                      margin-left:auto;margin-right:auto;" 
                                      src="'+currentpath+'"/>');  
        }" 
       loadcontent="function(pathfield,record,path){ 

       //preview the image when dialog is opened for the first time
       var previewPanel = pathfield.nextSibling(); 

       if(pathfield.getValue() != '')  
       previewPanel.body.update('<img style="max-width: 100%;display: block;
                                  margin-left:auto;margin-right:auto;" 
                                  src="'+pathfield.getValue()+'"/>'); 
       }"/>
  </ImagePathField>
  <previewPanel jcr:primaryType="cq:Widget" fieldLabel="Preview Pane"
               height="250" html="No image to preview" xtype="panel"/>
</items>
</tab1>

html5smartimage：使用pathfield作为图像源，通过禁用拖放

2 个答案: