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

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

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>