Can't get to wysihtml5 text area in colorBox after the box has been closed and reopened

Question

I have a wysiHtml5 text area on a popup which is shown via a colorbox:

$j.colorbox({
                inline: true,
                href: "#popup",
                scrolling: false,
                onLoad: function() {
                    $('#cboxClose').remove();
                },
                onCleanup: function () {
                    $j("div#popup").hide();

                },
                onClosed: function () {
                    editor = null;
                },
                onComplete: function () {

                    var editor = new wysihtml5.Editor("wysiwygText", { // id of textarea element
                        toolbar: "wysihtml5-toolbar", // id of toolbar element
                        parserRules: wysihtml5ParserRules, // defined in parser rules set 
                        stylesheets: ["Styles/wysihtml5.css", "Styles/wysihtml5.css"]
                    });


                }
            });

The editor works fine the first time the colorbox pops up. But if it is closed and reopened, the user can not click into the editor.

I wonder if it is to do with me trying to recreate the editor object? The trouble is, if I create it before the colorbox is launched, the editor gets "broken" when the colorbox launches. (i.e. if I set #popup to be visible, I can edit it when the page loads, but when I launch the color box, I again can't edit the content.

The behaviour is that I can see the text area, but I can't "click into" it.

Answer 1

This might not help you but I had a problem like this.. I had to create the editor after the element was set to a dialog.

              $(".addtext").click(function(){

                    $("#editorcontainer").dialog({
                        width: 737
                    });

                    (function($){
                        $("#wysihtml5-textarea").wysihtml5(); 
                    })($1_7_2);

                });

The only issue is duplication of the wysihtml5 editor with concurrent openings of the dialog. I'll post again when I fix that.

Edit: I probably should take the time to go through the wysihtml5 code to really understand whats going on, but I cant spend too much time on it now. I noticed that the editor was creating dom elements each time wysihtml5() was invoked. This was making duplicated elements, so the idea is to use a container element and create its inner contents when the dialog is opened, and destroy its inner contents when the dialog is closed. On a side note, I really hate it when programmers don't document their designs.

//button click event
$(".addtext").click(function(){
        $("#editorcontainer").dialog({
             width: 737,

             open: function(event, ui){
                  //create inner html
                  $(this).html("<form><textarea id=\"wysihtml5-textarea\" \
                  placeholder=\"Enter your text ...\" \
                  autofocus></textarea></form>");
             },

             close: function(event, ui){
                  //remove inner html
                  $(this).html("");
              }

          });

          //older version of jQuery aliased to $1_7_2
          (function($){
               //invoke the editor
               $("#wysihtml5-textarea").wysihtml5(); 
           })($1_7_2);

 });