Javascript 更新：单击多个图像并为1个输入字段创建逗号分隔的值。乔姆拉媒体经理

我找到了另一段Joomla Jaavo脚本，可以更轻松地完成这个技巧：

如果我可以将其附加而不是更改值，那么我就可以在joomla中创建一个媒体管理器，让您创建逗号分隔的值，然后可以为照片库等检索这些值

又一次它的moootools

--

目前，joomla media manager只允许您在每个字段grr中一次选择一个图像

我知道我可以找到一个扩展，但他们没有一个真正做一件小事，他们希望你安装厨房水槽，我不喜欢

--下面的第一个帖子

也许有人能帮我破译密码。我希望能够单击图像并插入逗号分隔的路径，而不仅仅是一个图像路径

到目前为止，我发现的代码如下：我希望有人能帮助我，因为我已经尝试了一些修改，但不太了解mootools

很抱歉，我发布了整个.js文件，但我不确定应该省略哪些部分

js文件下面是一些小的HTML片段，希望能解释事物的上下文

再一次-我正在尝试解决如何单击多个图像并创建一个逗号分隔的字符串，该字符串位于输入字段中

ps：下面的js文件中引用了populateFileds：

populateFields: function(file)
{
    document.id("f_url").value = image_base_path+file; 
},

---

（joomla root）media/media/js/popup-imagemanager.js

---

/**
*@版权所有（C）2005-2013开放源码事务公司。保留所有权利。
*@license GNU通用公共许可证版本2或更高版本；请参阅LICENSE.txt
*/
/**
*媒体组件的JImageManager行为
*
*@package Joomla.Extensions
*@子包介质
*@自1.5
*/
（功能（）{
var ImageManager=this.ImageManager={
初始化：函数（）
{
o=this.\u getUriObject（window.self.location.href）；
//控制台日志（o）；
q=新哈希（this.\u getQueryObject（o.query））；
this.editor=decodeURIComponent（q.get（'e_name'））；
//设置图像管理器字段对象
this.fields=新对象（）；
this.fields.url=document.id（“f_url”）；
this.fields.alt=document.id（“f_alt”）；
this.fields.align=document.id（“f_align”）；
this.fields.title=document.id（“f_title”）；
this.fields.caption=document.id（“f_caption”）；
//设置图像列表对象
this.folderlist=document.id（'folderlist'）；
this.frame=window.frames['imageframe']；
this.frameurl=this.frame.location.href；
//设置图像列表框
this.imageframe=document.id（'imageframe'）；
this.imageframe.manager=this；
this.imageframe.addEvent（'load'，function（）{ImageManager.onloadimageview（）；}）；
//安装文件夹向上按钮
this.upbutton=document.id（'upbutton'）；
this.upbutton.removeEvents（'click'）；
this.upbutton.addEvent（'click'，function（）{ImageManager.upFolder（）；}）；
},
onloadimageview:函数（）
{
//更新框架url
this.frameurl=this.frame.location.href；
var folder=this.getImageFolder（）；
for（var i=0；ipopulateFields: function(file)
{
    document.id("f_url").value = image_base_path+file; 
},

/**
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

/**
 * JImageManager behavior for media component
 *
 * @package     Joomla.Extensions
 * @subpackage  Media
 * @since       1.5
 */

(function() {
var ImageManager = this.ImageManager = {
    initialize: function()
    {
        o = this._getUriObject(window.self.location.href);
        //console.log(o);
        q = new Hash(this._getQueryObject(o.query));
        this.editor = decodeURIComponent(q.get('e_name'));

        // Setup image manager fields object
        this.fields         = new Object();
        this.fields.url     = document.id("f_url");
        this.fields.alt     = document.id("f_alt");
        this.fields.align   = document.id("f_align");
        this.fields.title   = document.id("f_title");
        this.fields.caption = document.id("f_caption");

        // Setup image listing objects
        this.folderlist = document.id('folderlist');

        this.frame      = window.frames['imageframe'];
        this.frameurl   = this.frame.location.href;

        // Setup image listing frame
        this.imageframe = document.id('imageframe');
        this.imageframe.manager = this;
        this.imageframe.addEvent('load', function(){ ImageManager.onloadimageview(); });

        // Setup folder up button
        this.upbutton = document.id('upbutton');
        this.upbutton.removeEvents('click');
        this.upbutton.addEvent('click', function(){ ImageManager.upFolder(); });
    },

    onloadimageview: function()
    {
        // Update the frame url
        this.frameurl = this.frame.location.href;

        var folder = this.getImageFolder();
        for(var i = 0; i < this.folderlist.length; i++)
        {
            if(folder == this.folderlist.options[i].value) {
                this.folderlist.selectedIndex = i;
                break;
            }
        }

        a = this._getUriObject(document.id('uploadForm').getProperty('action'));
        //console.log(a);
        q = new Hash(this._getQueryObject(a.query));
        q.set('folder', folder);
        var query = [];
        q.each(function(v, k){
            if (v !== null) {
                this.push(k+'='+v);
            }
        }, query);
        a.query = query.join('&');
        var portString = '';
        if (typeof(a.port) !== 'undefined' && a.port != 80) {
            portString = ':'+a.port;
        }
        document.id('uploadForm').setProperty('action', a.scheme+'://'+a.domain+portString+a.path+'?'+a.query);
    },

    getImageFolder: function()
    {
        var url     = this.frame.location.search.substring(1);
        var args    = this.parseQuery(url);

        return args['folder'];
    },

    onok: function()
    {
        extra = '';
        // Get the image tag field information
        var url     = this.fields.url.get('value');
        var alt     = this.fields.alt.get('value');
        var align   = this.fields.align.get('value');
        var title   = this.fields.title.get('value');
        var caption = this.fields.caption.get('value');

        if (url != '') {
            // Set alt attribute
            if (alt != '') {
                extra = extra + 'alt="'+alt+'" ';
            } else {
                extra = extra + 'alt="" ';
            }
            // Set align attribute
            if (align != '') {
                extra = extra + 'align="'+align+'" ';
            }
            // Set align attribute
            if (title != '') {
                extra = extra + 'title="'+title+'" ';
            }
            // Set align attribute
            if (caption != '') {
                extra = extra + 'class="caption" ';
            }

            var tag = "<img src=\""+url+"\" "+extra+"/>";
        }

        window.parent.jInsertEditorText(tag, this.editor);
        return false;
    },

    setFolder: function(folder,asset,author)
    {
        //this.showMessage('Loading');

        for(var i = 0; i < this.folderlist.length; i++)
        {
            if(folder == this.folderlist.options[i].value) {
                this.folderlist.selectedIndex = i;
                break;
            }
        }
        this.frame.location.href='index.php?option=com_media&view=imagesList&tmpl=component&folder=' + folder + '&asset=' + asset + '&author=' + author;
    },

    getFolder: function() {
        return this.folderlist.get('value');
    },

    upFolder: function()
    {
        var currentFolder = this.getFolder();

        if(currentFolder.length < 2) {
            return false;
        }

        var folders = currentFolder.split('/');
        var search = '';

        for(var i = 0; i < folders.length - 1; i++) {
            search += folders[i];
            search += '/';
        }

        // remove the trailing slash
        search = search.substring(0, search.length - 1);

        for(var i = 0; i < this.folderlist.length; i++)
        {
            var thisFolder = this.folderlist.options[i].value;

            if(thisFolder == search)
            {
                this.folderlist.selectedIndex = i;
                var newFolder = this.folderlist.options[i].value;
                this.setFolder(newFolder);
                break;
            }
        }
    },

    populateFields: function(file)
    {
        document.id("f_url").value = image_base_path+file; 
    },

    showMessage: function(text)
    {
        var message  = document.id('message');
        var messages = document.id('messages');

        if(message.firstChild)
            message.removeChild(message.firstChild);

        message.appendChild(document.createTextNode(text));
        messages.style.display = "block";
    },

    parseQuery: function(query)
    {
        var params = new Object();
        if (!query) {
            return params;
        }
        var pairs = query.split(/[;&]/);
        for ( var i = 0; i < pairs.length; i++ )
        {
            var KeyVal = pairs[i].split('=');
            if ( ! KeyVal || KeyVal.length != 2 ) {
                continue;
            }
            var key = unescape( KeyVal[0] );
            var val = unescape( KeyVal[1] ).replace(/\+ /g, ' ');
            params[key] = val;
       }
       return params;
    },

    refreshFrame: function()
    {
        this._setFrameUrl();
    },

    _setFrameUrl: function(url)
    {
        if (url != null) {
            this.frameurl = url;
        }
        this.frame.location.href = this.frameurl;
    },

    _getQueryObject: function(q) {
        var vars = q.split(/[&;]/);
        var rs = {};
        if (vars.length) vars.each(function(val) {
            var keys = val.split('=');
            if (keys.length && keys.length == 2) rs[encodeURIComponent(keys[0])] = encodeURIComponent(keys[1]);
        });
        return rs;
    },

    _getUriObject: function(u){
        var bits = u.match(/^(?:([^:\/?#.]+):)?(?:\/\/)?(([^:\/?#]*)(?::(\d*))?)((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[\?#]|$)))*\/?)?([^?#\/]*))?(?:\?([^#]*))?(?:#(.*))?/);
        return (bits)
            ? bits.associate(['uri', 'scheme', 'authority', 'domain', 'port', 'path', 'directory', 'file', 'query', 'fragment'])
            : null;
    }
};
})(document.id);

window.addEvent('domready', function(){
    ImageManager.initialize();
});

<input type="text" id="f_url" value="" style="width: 560px;" /> Click files then click insert. 

<a href="javascript:ImageManager.populateFields('<?php echo $this->_tmp_img->path_relative; ?>')" title="<?php echo $this->_tmp_img->name; ?>" >
<img style="height: 150px;" src="<?php echo $this->baseURL; ?>/<?php echo $this->_tmp_img->path_relative; ?>"/>
</a>