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.
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);
});