Pasted

 <!DOCTYPE html>
<html>  
<head>
    <meta charset="UTF-8">
    <title>Lightbox Tinymce Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css"></link>
    <script type="text/javascript">
        var gmFullscreen = false;
      tinymce.init({
          selector: 'textarea#gminput',
          init_instance_callback : "myCustomInitInstance",
           height : 260,
          inline: false,
          browser_spellcheck: true,
          plugins: "",
          menubar: "edit insert format view tools table",
          toolbar1: 'mysave myexit insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
          toolbar2: 'fullscreen print preview media | forecolor backcolor | insertdatetime table searchreplace code',
          external_plugins:{
              'fullscreen': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/fullscreen/plugin.min.js',
              'textcolor': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/textcolor/plugin.min.js',
              'nonbreaking': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/nonbreaking/plugin.min.js',
              'insertdatetime': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/insertdatetime/plugin.min.js',
              'code': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/code/plugin.min.js',
              'hr': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/hr/plugin.min.js',
              'searchreplace': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/searchreplace/plugin.min.js',
              'table': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/table/plugin.min.js'
        },
          setup : function(ed) {
              // Add a custom button
              ed.on('FullscreenStateChanged', function(e) {
                  //console.log('FullscreenStateChanged event', e);
                  gmFullscreen = e.state;
              });
            ed.addButton('mysave', {
                title : 'Save',
                onclick : function() {
                    //jQuery('.lightbox_save_close').trigger('click');
                    save_box();
                }
            
            });
            ed.addButton('myexit', {
                title : 'Close',
                onclick : function() {
                    jQuery('.gmclose').trigger('click');
            }
            });
              
        }
});
        function myCustomInitInstance(inst) {
            // add save icon to button
            jQuery('.mce-i-mysave').addClass('fi-save');
            // add x icon to button
            jQuery('.mce-i-myexit').addClass('fi-x');
            //alert("Editor: " + inst.id + " is now initialized.");
        }
  </script>
    
    <style type="text/css">
 
        body
        {
            font-family: Helvetica, Arial;
        }
 
        .gmbackdrop
        {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }
 
 
        .gmbox
        {
            position:absolute;
            top:20%;
            left:30%;
            width:650px;
            height:450px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;
        }
 
        .gmclose
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }
 
        </style>
        
<script type="text/javascript">
    
    jQuery(document).ready(function(){
        
        
        jQuery('.lightbox').click(function() {
            // if editor has been left in full screeen then
            // set it back to lightbox
            if(gmFullscreen)
            {
                tinyMCE.get('gminput').execCommand('mceFullScreen');    
            }
            tinymce.get('gminput').setContent(jQuery('.note').html());
            jQuery('.gmbackdrop, .gmbox').animate({'opacity':'.50'}, 300, 'linear');
            jQuery('.gmbox').animate({'opacity':'1.00'}, 300, 'linear');
            jQuery('.gmbackdrop, .gmbox').css('display', 'block');
            
            
            // write out current tinymce editor to the console
            // useful to figure out what id tinymce has registered
            //for (var i = 0; i < tinymce.editors.length; i++){console.log("TinyMce Editor id:", tinymce.editors[i].id);}   
        });
        
        jQuery('.gmclose').click(function(){
            close_box();
        });
    });
 
    function close_box()
    {
        if (confirm('Are you sure you want to close this editor?')) {
            // Save it!
            jQuery('.gmbackdrop, .gmbox').animate({'opacity':'0'}, 300, 'linear', function(){
                jQuery('.gmbackdrop, .gmbox').css('display', 'none');
            });
            jQuery('textarea#gminput').val(''); // clean up textarea
            tinymce.get('gminput').setContent(''); // clean up tinymce
            return true;
        }
        return false;
    }
    
    function save_box() {
        // var strTxt = jQuery('textarea#gminput').val().toString();
        var strTxt = tinymce.get('gminput').getContent();
        jQuery('.gmbackdrop, .gmbox').animate({'opacity':'0'}, 300, 'linear', function(){
            jQuery('.gmbackdrop, .gmbox').css('display', 'none');
 
        });
        jQuery('.note').html(strTxt);
        jQuery('textarea#gminput').val(''); // clean up textarea
        tinymce.get('gminput').setContent(''); // clean up tinymce
    }
 
    
</script>
</head>
<body>
    <h1>Lightbox Tinymce Example</h1>
    <i class="fi-star"></i>
    <a href="#" class="lightbox">Open Lightbox</a>
    <div class="note"><p style="color:green;">Hello world</p></div>
 
    <div class="gmbackdrop"></div>
    <div class="gmbox"><div class="gmclose"><i class="fi-x"></i></div>This is the lightbox!!!<div>
         <textarea id="gminput" rows="18" cols="68"></textarea> 
        </div>
    </div>
</body>
</html>