码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-22 09:56:27      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:ipa   base64   family   图文   png   plugin   encode   exec   窗体   

用过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代码中:

技术分享

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

技术分享

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

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


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

标签:ipa   base64   family   图文   png   plugin   encode   exec   窗体   

原文地址:http://www.cnblogs.com/gavanwanggw/p/7220264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!