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

用过Joomla 2.5的朋友应该都知道插入很多图像时是比較麻烦的。点了文章以下的图片button，它会弹出个div，让你选择图片，每选一张。div就关闭。

再选第二张的时候，它又要你又一次选择文件夹。对于我常常要一次插入10张图片以上的非常麻烦。

（这里借用官网的图片。以下把这里叫sbox）

当然了，这是Joomla自带的插入图片的快捷button。我用的TinyMCE的图片插入更朴素：

我一直在找一种便于插入图片的方法。

本来是想升级editor到TinyMCE 4的，但是我的Joomla是Synology自带的应用。跟官方的Joomla不太一样，升级不了。

想用JCE 2.6，安装之后死活出不来编辑器的界面，查了一下好多人也有这问题。并且能一边预览一边插入的好像也不多。

仅仅好自己动手了，

1. 思路：

在点击“图片”button后将TinyMCE editor中的文章的HTML源代码载入到sbox中，然后一边浏览图片一边将图片地址插入到文章的HTML源代码中，这个过程中sbox的div窗体不关闭。

等终于图片插入完成后，点一个自己添加的button，将文章返回给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();" title="Insert image tag in article content HTML code below and do NOT close this window">Insert</button>
			<button type="button" onclick="saveContent(); window.parent.SqueezeBox.close();" title="Set HTML code of editor with below and close this window">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();" title="ONLY insert ONE selected image tag in editor and close this window"><?

php echo JText::_('COM_MEDIA_INSERT') ?></button>
			<button type="button" onclick="window.parent.SqueezeBox.close();" title="Just close this window"><?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}}");

700的高度适应性挺好的。

终于的效果：

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGh5Mzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGh5Mzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

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

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

时间： 2024-12-30 03:34:26

为Joomla 2.5的连续插入多幅图像添加便捷方式的相关文章

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

用过Joomla 2.5的朋友应该都知道插入许多图像时是比较麻烦的.点了文章下面的图片按钮,它会弹出个div,让你选择图片,每选一张,div就关闭.再选第二张的时候,它又要你重新选择目录,对于我经常要一次插入10张图片以上的很麻烦.(这里借用官网的图片,下面把这里叫sbox) 当然了,这是Joomla自带的插入图片的快捷按钮,我用的TinyMCE的图片插入更朴素: 我一直在找一种便于插入图片的方法. 本来是想升级editor到TinyMCE 4的,可是我的Joomla是Synology自带的应用

[ jquery 文档处理 prepend(content|fn) ] 此方法用于向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式

向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,keywor

Markdown 中快速插入图片的处理方式

Markdown 中快速插入图片的处理方式选项 : Marxico 同步 evernote 账号, 然后在Marxico 中插入数据适用于evernote 重度使用者,但以前Marxico sync to evernote 的免费的功能,现在需要付费 vscode 插件(推荐) paste image to aliyun paste image to qiniu (推荐) 在试验 paste image to qiniu 的时候,发现提示发现 https://github.com/fave

SQL 数据库连续插入大批量数据时超时

经常会处理大批量千万级的数据,一直以来都没问题.最近在处理时确出来了经常超时,程序跑一段时间就得停下来重启服务器,根据几次的调整发现了问题的所在,产生这类问题主要是以下几点所导致: 1.数据库连接未关闭,大量操作数据库时,连接未关闭的话,会导致连接过多数据库卡死. 2.检查数据库的超时时间设置过短. 3.索引:数据库操作期间太多的索引导致产生很多碎片,清理和重新组织了下索引 . 4.日志文件过大数据的操作时处理日志超时导致,删除或是压缩日志,把日志文件的增长降低. 现在这种问题基本上是第3.4两

springmvc 使用poi解析excel并通过hibernate连续插入多条数据实际数据库只能保存最后一条

有一个原始数据的excel表用poi解析之后通过hibernate插数据库结果后来发现,有人说果断尝试问题解决但是这好像并不是真正解决问题,只是解决了一个现象因为有人说 https://blog.csdn.net/u010739551/article/details/49362403 实际上我刚才那种操作是正确的,并且做了测试,但是我实测是不行的,那只能解释为版本问题了原文地址:https://www.cnblogs.com/jnhs/p/10060717.html

支持插入、添加、删除的PyGridTableBase子类

网格控件是用以显示一个二维的数据集的.要使用该控件显示有用的信息,你需要告诉该控件它工作所基于的是什么数据.在wxPython中,有两种不同的机制用于在网格控件中处理数据,它们之间在处理数据的添加,删除和编辑的方式上有些许的不同.网格控件可以直接处理每行和每列中的值.数据可以通过使用一个网格表(grid table)来间接地处理我们要讨论正是第二种方式,至于如何实现的细节,这里不再赘述(网上已经有很多例子了),只简单讲些主要步骤:创建wx.grid.PyGridTableBase的子类,并覆盖父

mybatis动态sql之使用foreach进行批量插入的两种方式

EmployeeMapperDynamicSql.java package com.gong.mybatis.mapper; import java.util.List; import java.util.Map; import org.apache.ibatis.annotations.MapKey; import org.apache.ibatis.annotations.Param; import com.gong.mybatis.bean.Employee; public interfa

MathType工具栏知多少

MathType是为微软 Word 设计的强大工具,MathType工具栏会安装到Microsoft Word 97及以后版本中(Windows 版本) / Microsoft Word 98及以后版本中(Macintosh 版本),给你提供各种各样的插入数学的便捷方式.以下教程详细介绍在Word中的MathType工具栏. Windows版本 Word中的 MathType 工具栏(如下图所示) 在Word中的 MathType 工具栏示例 MathType 还在 Word 中添加了以下的功能

mysql 批量插入数据

MySQL使用INSERT插入多条记录,应该如何操作呢?下面就为您详细介绍MySQL使用INSERT插入多条记录的实现方法,供您参考. 看到这个标题也许大家会问,这有什么好说的,调用多次INSERT语句不就可以插入多条记录了吗!但使用这种方法要增加服务器的负荷,因为,执行每一次SQL服务器都要同样对SQL进行分析.优化等操作.幸好MySQL提供了另一种解决方案,就是使用一条INSERT语句来插入多条记录.这并不是标准的SQL语法,因此只能在MySQL中使用. INSERT INTO users(