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

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

2024-07-08 14:00:43   229人阅读

用过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的用户插入图片时更舒服些。


联系
我们