wysihtml5 commands come up as undefined

Question

When I load up the wysithml5 bootstrap editor, this command or any command that wysihtml5 bootstrap supports does not work.

When I alert editor.composer.commands, it comes up as undefined.

What can I do to fix this? jQuery is loaded with jQuery-UI, I don't know if that helps.

$(document).ready(function() {
    $('#content').wysihtml5();
    var editor = $('#content').wysihtml5().data("wysihtml5").editor;
    editor.currentView.element.focus();
    editor.composer.commands.exec('insertHTML' , 'Something');`
});

Referenced editor: https://github.com/xing/wysihtml5

Answer 1

I had this problem when programmatically using commands soon after the editor is instantiated and loaded to the page. Consider the following code:

<textarea id="wysihtml5-textarea" rows="3" autofocus></textarea>

I solved it by allowing some time after the editor is loaded using window.setTimeout. The code below is an example using 'insertImage' command:

$(function () {
   var editorEle = $('#wysihtml5-textarea');
   var editorToolbarEle = $('#wysihtml5-toolbar');
   var editor = new wysihtml5.Editor(editorEle.prop('id'), {});

   window.setTimeout(function() {
      editor.focus();
      editor.composer.commands.exec("insertImage", { src: 'foo.png', alt: "image.." });
   }, 200);
});

You can see this code running and test it using the following JSFiddle (remove the setTimeout to see the error occur):

http://jsfiddle.net/wv0fbsew/

I had this problem when using a forked version of the editor (wysihtml5x). It is not the Bootstrap version mentioned on this question, neither the one I was using, but the issue is the same.