tinyMCE doesn't init inside a jsPanel

[vincentteyssier]

Hi,

I successfully put content in my jsPanel (a textarea for example). I am trying to transform my textarea into a tinyMCE rich text editor. I specify a callback fundtion to my jsPanel and try to init a tinyMCE. Init works, but it still displays a textarea instead of the tinyMCE editor...
Any idea why ? Is there any display refresh to perform once a jsPanel is instanciated?Can we manipulate content via normal jQuery selectors or should we always use the methods like content, etc... ?

[Flyer53]

Hi there,
well, I needed a bit time to setup a very basic example. I didn't work with tinyMCE so far. But the following code seems to work fine with jsPanel version 2.5.5. At least on my machine it instantiates tinyMCE properly and with the "jspanelbeforeclose" handler you can close the panel and reopen it again with tinyMCE

$.jsPanel({
  id: "mypanel",
  size: {width: 650, height: 212},
  content: '<form method="post"><textarea id="mytinymce">Hi there !</textarea></form>',
  callback: function(){
    tinymce.init({
      selector: '#mytinymce'
    });
  }
});
// add "jspanelbeforeclose" handler to remove the tinyMCE instance when closing the panel
$(document).on('jspanelbeforeclose', function(event, id){
  if( id === "mypanel") {
    tinymce.remove('#mytinymce');
  }
});

Concerning content you can use any jQuery method/selectors you want to do that if you prefer it that way. Here're a few examples on how to use the jsPanel content property together with jQuery methods
http://jspanel.de/api/property/content
I hope this quick example is of help.

[vincentteyssier]

Thanks a lot for the answer. Everything works. I figured out I had an id conflict.
In your example you assign an id to your jsPanel. If I don't, how are the ids generated ?

[Flyer53]

@thecenz1
If you don't assign an id the script generates one according to the pattern jsPanel-1, jsPanel-2, jsPanel-3 and so on. The counter is reset to 0 only if you reload the whole page.

BTW: I'm just working on a few new options like option.onbeforeclose. So you could write:

$.jsPanel({
  onbeforeclose: function(){
    // do something just before the panel closes ...
    // if function returns false closing of the panel would be canceled
  }
});

That'll be a lot easier than the current handling of events. I think I can release a version 2.6.0 sometime next week.

[vincentteyssier]

Thanks a lot for the tip^^.
Yeah that would be a very usefull method.
Specially that I was planing on adding a automatic save function so users can restore what they wrote in the jsPanel even if they closed it.
Thanks a lot for your help! You made a really great product! You can close this issue^^

[vincentteyssier]

Hey, me again :)

Actually the tinyMCE init, but if you minimize the jspanel, then maximize it, focus inside tinyMCE is not anymore allowed and the content previously entered has disappeared. I have made a clean test file to see if the issue could come from my project but I still have the issue.

From what I see it only affects the tinyMCE content box, not the toolbar. The content box is an iframe as you will notice if you try to reproduce the example.

Here is how I init everything :

 $(document).on('click', '#trigger_jspanel', function () {
    // instanciate the document jsPanel
    var this_panel = $.jsPanel({
        content: popup_document,
        position:       "center",
        title:          "Nouveau document",
        theme:          "autumnred",
        size:           {   width:  function(){ return $(window).width()*0.75 }, 
                            height: function(){ return $(window).height()*0.75 } },
        callback: function(panel){
            var height_container = $('#new_document_form').height();

            var panel_id = $(this).attr('id');
            $('#new_document_body').attr('id', 'new_document_body_'+panel_id);

            panel.title(panel_id.substr(8) + " - New document");

            tinymce.init({
                selector: '#new_document_body_'+panel_id,
                entity_encoding : "raw",
                encoding: "UTF-8",
                theme: "modern",
                skin: "light",
                width: '100%',
                language: 'fr_FR',
                height: height_container,
                forced_root_block : "",
                plugins: [
                    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                    "searchreplace wordcount visualblocks visualchars code fullscreen",
                    "insertdatetime media nonbreaking save table contextmenu directionality",
                    "emoticons template paste textcolor colorpicker textpattern"
                ],
                toolbar1: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
                toolbar2: "variable_insert | question_insert",
                image_advtab: true,
            });
        }
    });
    this_panel.footer.css('background-color', 'rgba(240, 240, 240, 0.8)');
});

And the function that creates the content :

function build_jsPanel_document_body() {
    var popup_document = "              <div style='height:100%; width:100%;'>"; 
    popup_document = popup_document + "     <table id='new_document_nav_container'>";
    popup_document = popup_document + "         <tr id='new_document_text_body' class='new_document_div' valign='middle'>"; // document text
    popup_document = popup_document + "             <td id='document_text_td' valign='middle'><form id='new_document_form' method='post'><textarea id='new_document_body'></textarea></form></td>";
    popup_document = popup_document + "         </tr>";
    popup_document = popup_document + "     </table>";
    popup_document = popup_document + " </div>";
    return popup_document;
}

Really weird :/ any idea?

I have also tested by hiding and showing tinymce this way :

$('body').on( "jspanelbeforeminimize", function( event, id ){
        console.log('before minimized');
        tinyMCE.get('new_document_body_'+id).hide();
});

$('body').on( "jspanelmaximized", function( event, id ){
    console.log('maximized');
    tinyMCE.get('new_document_body_'+id).show();
});

But it doesn't even trigger the jspanelmaximized event. I also tried jspanelbeforemaximized without showing tinymce and event is not triggered either.

So now what I am wondering is when minimize is triggered, what happens to the jspanel content... is it stored, hidden, destroyed, then recreated on maximize... ?

[Flyer53]

Hey dude, welcome back ;)

Well, the problem is not your code. It's the way I implemented the minimize feature: Whenever you minimize a jsPanel it is removed from its current container element and appended to a special container at the bottom of the page for the minimized panels. Now when you restore the minimized panel again to its former position its again removed from one container and appended to the original container. In this process the ifame content is reloaded -> anything you entered in the "textarea" before is gone.... so far the short explanation.

The easy solution:
Move to jsPanel 3 Beta. There I use a much easier mechanism. A minimized panel is simply moved off screen by altering css left. That's it! So any content in the panel is not affected in any way. What you see at the bottom of the page is just a "replacement element", not the actual panel you minimized.
jsPanel 3 Beta is stable as far as I can say and I won't make any more changes to the API. So it should be safe to use.

Please take a look at http://beta.jspanel.de/ and let me know whether this could be a solution for you.

Bonne soirée, Stefan

[vincentteyssier]

Thanks, indeed that would be a solution.
I've looked at the doc and it's very well done :) specially the migration tips.

I've installed it but got some issues. I'm closing this topic and reporting the issue in the correct section so it can be useful to others.

EDIT: tinyMCE works like a charm on v3.