首页 > 代码库 > 为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的用户插入图片时更舒服些。