API tools faq
paste
Advertisement
AmourSpirit

working example of tinymce in lightbox

AmourSpirit
Dec 24th, 2015
298
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.62 KB | None | 0 0
raw download clone embed print report
  1.  <!DOCTYPE html>
  2. <html> 
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Lightbox Tinymce Example</title>
  6.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  7.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
  8.     <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css"></link>
  9.     <script type="text/javascript">
  10.         var gmFullscreen = false;
  11.       tinymce.init({
  12.           selector: 'textarea#gminput',
  13.           init_instance_callback : "myCustomInitInstance",
  14.            height : 260,
  15.           inline: false,
  16.           browser_spellcheck: true,
  17.           plugins: "",
  18.           menubar: "edit insert format view tools table",
  19.           toolbar1: 'mysave myexit insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
  20.           toolbar2: 'fullscreen print preview media | forecolor backcolor | insertdatetime table searchreplace code',
  21.           external_plugins:{
  22.               'fullscreen': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/fullscreen/plugin.min.js',
  23.               'textcolor': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/textcolor/plugin.min.js',
  24.               'nonbreaking': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/nonbreaking/plugin.min.js',
  25.               'insertdatetime': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/insertdatetime/plugin.min.js',
  26.               'code': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/code/plugin.min.js',
  27.               'hr': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/hr/plugin.min.js',
  28.               'searchreplace': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/searchreplace/plugin.min.js',
  29.               'table': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/plugins/table/plugin.min.js'
  30.         },
  31.           setup : function(ed) {
  32.               // Add a custom button
  33.               ed.on('FullscreenStateChanged', function(e) {
  34.                   //console.log('FullscreenStateChanged event', e);
  35.                   gmFullscreen = e.state;
  36.               });
  37.             ed.addButton('mysave', {
  38.                 title : 'Save',
  39.                 onclick : function() {
  40.                     //jQuery('.lightbox_save_close').trigger('click');
  41.                     save_box();
  42.                 }
  43.            
  44.             });
  45.             ed.addButton('myexit', {
  46.                 title : 'Close',
  47.                 onclick : function() {
  48.                     jQuery('.gmclose').trigger('click');
  49.             }
  50.             });
  51.              
  52.         }
  53. });
  54.         function myCustomInitInstance(inst) {
  55.             // add save icon to button
  56.             jQuery('.mce-i-mysave').addClass('fi-save');
  57.             // add x icon to button
  58.             jQuery('.mce-i-myexit').addClass('fi-x');
  59.             //alert("Editor: " + inst.id + " is now initialized.");
  60.         }
  61.   </script>
  62.    
  63.     <style type="text/css">
  64.  
  65.         body
  66.         {
  67.             font-family: Helvetica, Arial;
  68.         }
  69.  
  70.         .gmbackdrop
  71.         {
  72.             position:absolute;
  73.             top:0px;
  74.             left:0px;
  75.             width:100%;
  76.             height:100%;
  77.             background:#000;
  78.             opacity: .0;
  79.             filter:alpha(opacity=0);
  80.             z-index:50;
  81.             display:none;
  82.         }
  83.  
  84.  
  85.         .gmbox
  86.         {
  87.             position:absolute;
  88.             top:20%;
  89.             left:30%;
  90.             width:650px;
  91.             height:450px;
  92.             background:#ffffff;
  93.             z-index:51;
  94.             padding:10px;
  95.             -webkit-border-radius: 5px;
  96.             -moz-border-radius: 5px;
  97.             border-radius: 5px;
  98.             -moz-box-shadow:0px 0px 5px #444444;
  99.             -webkit-box-shadow:0px 0px 5px #444444;
  100.             box-shadow:0px 0px 5px #444444;
  101.             display:none;
  102.         }
  103.  
  104.         .gmclose
  105.         {
  106.             float:right;
  107.             margin-right:6px;
  108.             cursor:pointer;
  109.         }
  110.  
  111.         </style>
  112.        
  113. <script type="text/javascript">
  114.    
  115.     jQuery(document).ready(function(){
  116.        
  117.        
  118.         jQuery('.lightbox').click(function() {
  119.             // if editor has been left in full screeen then
  120.             // set it back to lightbox
  121.             if(gmFullscreen)
  122.             {
  123.                 tinyMCE.get('gminput').execCommand('mceFullScreen');   
  124.             }
  125.             tinymce.get('gminput').setContent(jQuery('.note').html());
  126.             jQuery('.gmbackdrop, .gmbox').animate({'opacity':'.50'}, 300, 'linear');
  127.             jQuery('.gmbox').animate({'opacity':'1.00'}, 300, 'linear');
  128.             jQuery('.gmbackdrop, .gmbox').css('display', 'block');
  129.            
  130.            
  131.             // write out current tinymce editor to the console
  132.             // useful to figure out what id tinymce has registered
  133.             //for (var i = 0; i < tinymce.editors.length; i++){console.log("TinyMce Editor id:", tinymce.editors[i].id);}  
  134.         });
  135.        
  136.         jQuery('.gmclose').click(function(){
  137.             close_box();
  138.         });
  139.     });
  140.  
  141.     function close_box()
  142.     {
  143.         if (confirm('Are you sure you want to close this editor?')) {
  144.             // Save it!
  145.             jQuery('.gmbackdrop, .gmbox').animate({'opacity':'0'}, 300, 'linear', function(){
  146.                 jQuery('.gmbackdrop, .gmbox').css('display', 'none');
  147.             });
  148.             jQuery('textarea#gminput').val(''); // clean up textarea
  149.             tinymce.get('gminput').setContent(''); // clean up tinymce
  150.             return true;
  151.         }
  152.         return false;
  153.     }
  154.    
  155.     function save_box() {
  156.         // var strTxt = jQuery('textarea#gminput').val().toString();
  157.         var strTxt = tinymce.get('gminput').getContent();
  158.         jQuery('.gmbackdrop, .gmbox').animate({'opacity':'0'}, 300, 'linear', function(){
  159.             jQuery('.gmbackdrop, .gmbox').css('display', 'none');
  160.  
  161.         });
  162.         jQuery('.note').html(strTxt);
  163.         jQuery('textarea#gminput').val(''); // clean up textarea
  164.         tinymce.get('gminput').setContent(''); // clean up tinymce
  165.     }
  166.  
  167.    
  168. </script>
  169. </head>
  170. <body>
  171.     <h1>Lightbox Tinymce Example</h1>
  172.     <i class="fi-star"></i>
  173.     <a href="#" class="lightbox">Open Lightbox</a>
  174.     <div class="note"><p style="color:green;">Hello world</p></div>
  175.  
  176.     <div class="gmbackdrop"></div>
  177.     <div class="gmbox"><div class="gmclose"><i class="fi-x"></i></div>This is the lightbox!!!<div>
  178.          <textarea id="gminput" rows="18" cols="68"></textarea>
  179.         </div>
  180.     </div>
  181. </body>
  182. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!