用过Joomla 2.5的朋友应该都知道插入许多图像时是比较麻烦的。点了文章下面的图片按钮，它会弹出个div，让你选择图片，每选一张，div就关闭。再选第二张的时候，它又要你重新选择目录，对于我经常要一次插入10张图片以上的很麻烦。（这里借用官网的图片，下面把这里叫sbox）
当然了，这是Joomla自带的插入图片的快捷按钮，我用的TinyMCE的图片插入更朴素：
我一直在找一种便于插入图片的方法。
本来是想升级editor到TinyMCE 4的，可是我的Joomla是Synology自带的应用，跟官方的Joomla不太一样，升级不了。想用JCE 2.6，安装之后死活出不来编辑器的界面，查了一下好多人也有这问题。而且能一边预览一边插入的好像也不多。
只好自己动手了，
1. 思路：
在点击“图片”按钮后将TinyMCE editor中的文章的HTML源码加载到sbox中，然后一边浏览图片一边将图片地址插入到文章的HTML源码中，这个过程中sbox的div窗口不关闭。等最终图片插入完毕后，点一个自己增加的按钮，将文章返回给TinyMCE editor，同时关闭窗口。
2. 草案：
需要增加一个textarea，来放置文章的源代码。一个button，title="OK"，用来在完成后返回文章编辑界面。同时要修改自带的Insert的行为。
3. 代码：
a. joomla->administrator->components->com_media->views->images->tmpl->default.php的最终代码。（这里就对应了图片选择器）
<?php
/**
* @package Joomla.Administrator
* @subpackage com_media
* @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access.
defined('_JEXEC') or die;
$user = JFactory::getUser();
?>
<script type='text/javascript'>
var image_base_path = '<?php $params = JComponentHelper::getParams('com_media');
echo $params->get('image_path', 'images');?>/';
//Added by henry
var $$ = function(func){
var oldOnload =window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
}
}
$$(function(){
console.dir(parent);
document.getElementById('htmlSourceForImage').value = parent.tinyMCE.editors.getLast().getContent({source_view : true})
})
function insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function insertImageToContent() {
extra = '';
// Get the image tag field information
var url = document.getElementById('f_url').value;
var alt = document.getElementById('f_alt').value;
var align = document.getElementById('f_align').value;
var title = document.getElementById('f_title').value;
var caption = document.getElementById('f_caption').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+"/>";
}
insertText(document.getElementById('htmlSourceForImage'), tag);
}
function saveContent() {
parent.tinyMCE.editors.getLast().setContent(document.getElementById('htmlSourceForImage').value, {source_view : true});
}
//Ended by henry
</script>
<form action="index.php?option=com_media&asset=<?php echo JRequest::getCmd('asset');?>&author=<?php echo JRequest::getCmd('author');?>" id="imageForm" method="post" enctype="multipart/form-data">
<div id="messages" style="display: none;">
<span id="message"></span><?php echo JHtml::_('image', 'media/dots.gif', '...', array('width' =>22, 'height' => 12), true)?>
</div>
<fieldset>
<div class="fltlft">
<label for="folder"><?php echo JText::_('COM_MEDIA_DIRECTORY') ?></label>
<?php echo $this->folderList; ?>
<button type="button" id="upbutton" title="<?php echo JText::_('COM_MEDIA_DIRECTORY_UP') ?>"><?php echo JText::_('COM_MEDIA_UP') ?></button>
</div>
<div class="fltrt">
<!-- added by henry -->
<button type="button" onclick="insertImageToContent();">Insert</button>
<button type="button" onclick="saveContent(); window.parent.SqueezeBox.close();">OK</button>
<!-- ended by henry -->
<button type="button" onclick="<?php if ($this->state->get('field.id')):?>window.parent.jInsertFieldValue(document.id('f_url').value,'<?php echo $this->state->get('field.id');?>');<?php else:?>ImageManager.onok();<?php endif;?>window.parent.SqueezeBox.close();"><?php echo JText::_('COM_MEDIA_INSERT') ?></button>
<button type="button" onclick="window.parent.SqueezeBox.close();"><?php echo JText::_('JCANCEL') ?></button>
</div>
</fieldset>
<iframe id="imageframe" name="imageframe" src="index.php?option=com_media&view=imagesList&tmpl=component&folder=<?php echo $this->state->folder?>&asset=<?php echo JRequest::getCmd('asset');?>&author=<?php echo JRequest::getCmd('author');?>"></iframe>
<!--Added by henry-->
<fieldset>
<label>Article content source HTML code:</label>
<textarea name="html_source" id="htmlSourceForImage" rows="15" cols="100"
style="width: 100%; height: 200px; font-family: 'Courier New', Courier, monospace; font-size: 12px; white-space: pre-wrap;"
dir="ltr" wrap="off" class="mceFocus"></textarea>
</fieldset>
<!--ended by henry-->
<fieldset>
<table class="properties">
<tr>
<td><label for="f_url"><?php echo JText::_('COM_MEDIA_IMAGE_URL') ?></label></td>
<td><input type="text" id="f_url" value="" /></td>
<?php if (!$this->state->get('field.id')):?>
<td><label for="f_align"><?php echo JText::_('COM_MEDIA_ALIGN') ?></label></td>
<td>
<select size="1" id="f_align" >
<option value="" selected="selected"><?php echo JText::_('COM_MEDIA_NOT_SET') ?></option>
<option value="left"><?php echo JText::_('JGLOBAL_LEFT') ?></option>
<option value="right"><?php echo JText::_('JGLOBAL_RIGHT') ?></option>
</select>
</td>
<td> <?php echo JText::_('COM_MEDIA_ALIGN_DESC');?> </td>
<?php endif;?>
</tr>
<?php if (!$this->state->get('field.id')):?>
<tr>
<td><label for="f_alt"><?php echo JText::_('COM_MEDIA_IMAGE_DESCRIPTION') ?></label></td>
<td><input type="text" id="f_alt" value="" /></td>
</tr>
<tr>
<td><label for="f_title"><?php echo JText::_('COM_MEDIA_TITLE') ?></label></td>
<td><input type="text" id="f_title" value="" /></td>
<td><label for="f_caption"><?php echo JText::_('COM_MEDIA_CAPTION') ?></label></td>
<td>
<select size="1" id="f_caption" >
<option value="" selected="selected" ><?php echo JText::_('JNO') ?></option>
<option value="1"><?php echo JText::_('JYES') ?></option>
</select>
</td>
<td> <?php echo JText::_('COM_MEDIA_CAPTION_DESC');?> </td>
</tr>
<?php endif;?>
</table>
<input type="hidden" id="dirPath" name="dirPath" />
<input type="hidden" id="f_file" name="f_file" />
<input type="hidden" id="tmpl" name="component" />
</fieldset>
</form>
<?php if ($user->authorise('core.create', 'com_media')): ?>
<form action="<?php echo JURI::base(); ?>index.php?option=com_media&task=file.upload&tmpl=component&<?php echo $this->session->getName().'='.$this->session->getId(); ?>&<?php echo JSession::getFormToken();?>=1&asset=<?php echo JRequest::getCmd('asset');?>&author=<?php echo JRequest::getCmd('author');?>&view=images" id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data">
<fieldset id="uploadform">
<legend><?php echo $this->config->get('upload_maxsize')=='0' ? JText::_('COM_MEDIA_UPLOAD_FILES_NOLIMIT') : JText::sprintf('COM_MEDIA_UPLOAD_FILES', $this->config->get('upload_maxsize')); ?></legend>
<fieldset id="upload-noflash" class="actions">
<label for="upload-file" class="hidelabeltxt"><?php echo JText::_('COM_MEDIA_UPLOAD_FILE'); ?></label>
<input type="file" id="upload-file" name="Filedata[]" multiple />
<label for="upload-submit" class="hidelabeltxt"><?php echo JText::_('COM_MEDIA_START_UPLOAD'); ?></label>
<input type="submit" id="upload-submit" value="<?php echo JText::_('COM_MEDIA_START_UPLOAD'); ?>"/>
</fieldset>
<input type="hidden" name="return-url" value="<?php echo base64_encode('index.php?option=com_media&view=images&tmpl=component&fieldid='.JRequest::getCmd('fieldid', '').'&e_name='.JRequest::getCmd('e_name').'&asset='.JRequest::getCmd('asset').'&author='.JRequest::getCmd('author')); ?>" />
</fieldset>
</form>
<?php endif; ?>上面我增加的部分都用//added by henry和//ended by henry包围了起来。
b. 因为加入了一个textarea，所以原先整个sbox的高度也要适当增加：
在joomla->plugins->editors-xtd->image->image.php的倒数第8行左右，找到这句：
$button->set('options', "{handler: 'iframe', size: {x: 800, y: 500}}");改成
$button->set('options', "{handler: 'iframe', size: {x: 800, y: 700}}");
最终的效果：
一边看着图片一边点击“Insert”插入到HTML代码中：
插入完毕之后，点击“OK”，将HTML源代码返回tiny mce编辑器。
感觉还不错，写多图文章不再是恶梦。
希望本文让Joomla的用户插入图片时更舒服些。
为Joomla 2.5的连续插入多幅图像增加便捷方式,布布扣,bubuko.com
原文地址：http://blog.csdn.net/thy38/article/details/31741143
