首页 > 代码库 > 为Joomla 2.5的连续插入多幅图像增加便捷方式

为Joomla 2.5的连续插入多幅图像增加便捷方式

用过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 = http://www.mamicode.com/parent.tinyMCE.editors.getLast().getContent({source_view : true})>上面我增加的部分都用//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}}");

700的高度适应性挺好的。


最终的效果:

一边看着图片一边点击“Insert”插入到HTML代码中:


插入完毕之后,点击“OK”,将HTML源代码返回tiny mce编辑器。


感觉还不错,写多图文章不再是恶梦。

希望本文让Joomla的用户插入图片时更舒服些。