Reading list Switch to dark mode

    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