Back to Top

Joomla Editor Xtd Button Plugin for Inserting HTML tag with popup form

Updated 1 March 2013

This is SpecialTextboxEditor.php file for making editor-xtd button plugins

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.plugin.plugin' );
jimport( 'joomla.html.editor' );
class plgButtonSpecialTextboxEditor extends JPlugin {  
    function plgButtonSpecialTextboxEditor(& $subject, $config)  {
        parent::__construct($subject, $config);
    }  
    function onDisplay($name)  {
        $doc = & JFactory::getDocument();  
        global $mainframe;  
         $js =  " 
            function Spbox_ClickCallback( editor, result, cbgcolor,ccaption,cheader,chbgcolor,cimage ){
                if( result  ) {  
                    if(result == \"custom\"){                        
                        if(ccaption==\"yes\")
                        { 
                            if(!tinyMCE.activeEditor.selection.getContent()) return; 
                               tinyMCE.activeEditor.selection.setContent('<div class=\"stb-container\"><div class=\"stb-custom-caption_box stb_caption\" style=\"    background-image: url('+cimage+'); background-position: left center; background-repeat: no-repeat; border-color: #'+ chbgcolor+'; border-left: 1px solid #'+ chbgcolor+'; border-right: 1px solid #'+ chbgcolor+'; border-top: 1px solid #'+ chbgcolor+';background-color: #'+ chbgcolor+'; direction: ltr; text-align: left; padding-right: 25px; \">'+ cheader+'</div><div class=\"stb-custom-body_box stb_body\" style=\"border-color: #'+ chbgcolor+'; border-left: 1px solid #'+ chbgcolor+'; border-right: 1px solid #'+ chbgcolor+'; border-top: 1px solid #'+ chbgcolor+'; background-color: #'+ cbgcolor+';\">'+ tinyMCE.activeEditor.selection.getContent()+'</div></div>');  
                        }
                        else
                        {
                            if(!tinyMCE.activeEditor.selection.getContent()) return; 
                               tinyMCE.activeEditor.selection.setContent('<div class=\"stb-custom_box\" style=\"border-color: #'+ chbgcolor+'; border-left: 1px solid #'+ chbgcolor+'; border-right: 1px solid #'+ chbgcolor+'; border-top: 1px solid #'+ chbgcolor+'; background-color: #'+ cbgcolor+';\">'+ tinyMCE.activeEditor.selection.getContent()+'</div>');  
                        }
                    }
                }
            }
       ";    
       $css = ".button2-left .SpboxButton {
          background: transparent url(../plugins/content/SpecialTextbox/images/plus.png) no-repeat 100% 0px;
          margin-top: 1px;
       }
       .Spbox-content {
         border: medium none;
         clear: none;
         margin: 0;
         padding: 0;
        }
         ";                

        $doc->addScriptDeclaration($js);
        $doc->addStyleDeclaration($css);
        $link = '../plugins/editors-xtd/SpecialTextboxEditor/dialog.php?ih_name='.$name;

        JHTML::_('behavior.modal');
        $button = new JObject();
        $button->set('modal', true);
        $button->set('link', $link);
        $button->set('text', JText::_('Special Box'));
        $button->set('name', 'SpboxButton');
        $button->set('options', "{handler: 'iframe', size: {x: 570, y: 400}}");
        return $button;
    }
}
?>

Button is looks like

editor special

and its parameter is look like this

param editor

Start your headless eCommerce
now.
Find out More

This is the code which called in iframe by link
$link = ‘../plugins/editors-xtd/SpecialTextboxEditor/dialog.php?ih_name=’.$name;

This is dialog.php file

<?	
/*
 * Insert HTML editor button plugin for Joomla! file   
 */ 
	define( '_JEXEC', 1 );
	define( 'DS', DIRECTORY_SEPARATOR );
	define( 'JPATH_BASE', realpath( '..'.DS.'..'.DS.'..'.DS ) );	
	require_once ( JPATH_BASE.DS.'includes'.DS.'defines.php' );
	require_once ( JPATH_BASE.DS.'includes'.DS.'framework.php' );

	$mainframe =& JFactory::getApplication('administrator');		
	jimport( 'joomla.plugin.plugin' );	

	$ih_name = addslashes( $_GET['ih_name'] );
?>
<html>
	<head>
	<title><?= JText::_('Special Textbox Editor') ?></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="dialog.css" />
	<script type="text/javascript" src="helper.js"></script>
	<script type="text/javascript" src="jscolor.js"></script>
	<script type="text/javascript">

		function InsertHtmlDialogokClick() {
		  var result = nl2br( codehtmlspecialchars(document.getElementById("code").value) );
		  var cbgcolor = nl2br( codehtmlspecialchars(document.getElementById("cbgcolor").value) );
		  var ccaption = nl2br( codehtmlspecialchars(document.getElementById("ccaption").value) );
		  var cheader = nl2br( codehtmlspecialchars(document.getElementById("cheader").value) );		  
		  var chbgcolor = nl2br( codehtmlspecialchars(document.getElementById("chbgcolor").value) );
		  var cimage = nl2br( codehtmlspecialchars(document.getElementById("cimage").value) );

		  window.parent.Spbox_ClickCallback( '<?= $ih_name ?>', result,cbgcolor,ccaption,cheader,chbgcolor,cimage );
		  window.parent.document.getElementById('sbox-window').close();		  
		}

		function InsertHtmlDialogcancelClick() {
			window.parent.document.getElementById('sbox-window').close();		  
		}		
	</script>
	</head>
	<body>
		<form name="inserthtml" id="inserthtml" onSubmit="return false;">
			<fieldset>
				<table class="properties">					
					<tr>
					  <td><h3><?= JText::_('Special Textbox Editors') ?></h3></td>
					</tr>
					<tr>
						<td>Select Box Type : </td>
						<td nowrap>
							<select name="code" id="code" class="input">			
								<option value="warning">Warning</option>
								<option value="alert">Alert</option>
								<option value="info" >Info</option>
								<option value="download">Download</option>
								<option value="blackbox">Black box</option>
								<option value="custom">Custom</option>
							</select> 
						</td>
					</tr>
					<tr>
						<td>Set Custom BgColor : </td>
						<td nowrap>	<input class="color" id="cbgcolor" name="cbgcolor" value="F8BAD8"></td>
					</tr>
					<tr>
						<td>Set Custom Caption : </td>
						<td nowrap>
							<select name="ccaption" id="ccaption" class="input">			
								<option value="yes">Yes</option>
								<option value="no">No</option>
							</select> 
						</td>
					</tr>
					<tr>
						<td>Custom Caption Name : </td>
						<td nowrap><input class="" id="cheader" name="cheader" value="Custom"></td>
					</tr>
					<tr>
						<td>Custom Icon Image : </td>
						<td nowrap><input class="" size="50" id="cimage" name="cimage" value="plugins/content/SpecialTextbox/images/heart.png"></td>
					</tr>
					<tr>
						<td>Custom Caption BgColor :</td>
						<td nowrap><input class="color" id="chbgcolor" name="chbgcolor" value="D745CE"></td>
					</tr>
				</table>
			</fieldset>
			<fieldset>
				<table class="properties">
					<tr>
						<td colspan="1" align="left" valign="bottom" nowrap>
							<input type="submit" value="<?= JText::_('Insert') ?>" onClick="InsertHtmlDialogokClick()" class="bt">
							<input type="button" value="<?= JText::_('Cancel') ?>" onClick="InsertHtmlDialogcancelClick()" class="bt">
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>

 

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home