Question

我正在joomla 3中创建一个组件，我需要一个图像上传器，如模板徽标上传器（显示灯箱弹出窗口和图像选择）。怎么做？

Answer 1

以下地址将显示从媒体管理器中选择图像的视图

http://yourdomain/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=

所以你可以在任何灯箱弹出式实现中打开它

打开它的页面必须包含

function jInsertEditorText( text, editor ){....}

选择“插入”按钮后，将调用此功能。

我将使用joomla3中默认提供的所有功能提供此实现的简单示例。

在您的组件的页面上，您可以使用以下代码来包含一个按钮，该按钮显示bootstarp的模态窗口（http://getbootstrap.com/2.3.2/javascript.html#modals）

<a href="#myModal" role="button" style="position:fixed;top:50px"class="btn" data-toggle="modal">show popup</a>

（请不要太注意style属性，因为它是用于测试目的）

如果你只是想从控制台或js那里做到这一点，你可以做到

jQuery("body").append('<a href="#myModal" role="button" style="position:fixed;top:50px"class="btn" data-toggle="modal">show popup</a>');

然后你可以用我上面提到的url添加一个iframe（当你在文章编辑器中按“image”时，joomla会采用相同的方法）

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src="http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author="></iframe></div>

动态地从控制台或js执行，

jQuery("body").append('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><iframe id="choose-image" src=""></iframe></div>');
jQuery('#choose-image').attr("src","http://joomla31.cloudaccess.net/administrator/index.php?option=com_media&view=images&tmpl=component&e_name=jform_articletext&asset=com_content&author=");

然后你可以在你的页面中提供一个js函数jInsertEditorText（text，editor）{....}，并在弹出窗口中选择图像后处理插入。或者只是为“插入”按钮提供自定义处理尝试从控制台或脚本中调用以下代码

Query("iframe#choose-image").load(function(){jQuery("#choose-image").contents().find(".btn.btn-primary:contains('Insert')").attr("onclick","").click(function(){alert(jQuery("#choose-image").contents().find("#f_url").val());});});

它基本上删除了默认的onclick脚本，并通过在警告对话框中显示所选的图像路径来添加自定义的点击处理。

joomla 3组件中需要的文件上传器，如模板徽标上传器

1 个答案: