javascriptjqueryhtmlcsstrumbowyg

panel with buttons doesn't appear on trumbowyg plugin

I'm using a plugin for javascript to have an HTML Editor (WYSIWYG), called Trumbowyg. no errors appear when instantiating an creating elementes with this plugin, but for some reason that I want to discover, the panel with the buttons/options doesn't show up.

My Code: 

        var editorHtmlElement = document.createElement('textarea');
        editorHtmlElement.className = "col-md-6";           
        editorHtmlElement.setAttribute('placeholder', 'placeholder...');
        var OptionsTrumbowyg = {};

        OptionsTrumbowyg.btns = [
            ['undo', 'redo'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ['formatting'],
            ['strong', 'em', 'del'],
            ['link'],
            ['insertImage'],
            ['unorderedList', 'orderedList'],
            ['horizontalRule'],
            ['removeformat'],
        ];
        OptionsTrumbowyg.autogrow = true;  

        var editorHtmljQuery = $(editorHtmlElement);

        editorHtmljQuery.trumbowyg(OptionsTrumbowyg);

After that, I append the editorHtmlElement to a div or whatever.

EXPECTED:
enter image description here
WHAT I'M GETTING
enter image description here
As you can see, no panel with buttons appear, even if I try with no custom options just the default... Anyone knows why?
(No errors appears)

Solution

  • I Managed to make it working by adding the Trumbowyg after all appends and includes of CSS, and changing the
    var editorHtmlElement = document.createElement('textarea');
    to
    var editorHtmlElement = document.createElement('div');

    Just moved the
    editorHtmljQuery.trumbowyg(OptionsTrumbowyg);
    for the end of all scripts when loading the page, then it worked well