Search code examples
javascripttwitter-bootstrapcode-generationsummernotehtml-generation

Summernote text editor not working in simple bootstrap page where html is generated

I added Summernote (a text editor for bootstrap) to a small page I am testing a form generator on. I cannot seem to be able to get the editor in my page at all, even if the examples are simple.

See this simplified jsfiddle I made that works and only has 2 lines.

This is my index.html file:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-checkbox.min.js" defer></script>
    <script src="js/bootstrap-filestyle.min.js" defer></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

    <script src="js/myJavaScript.js"></script>
</head>

<body onload="addAllElements()">
    <br/>
    <div class="row" id="mainRow">
    </div>
</body>

</html>

And this is my javascript file:

//This function should read a json file and produce the right form
function addAllElements() {
    //A test for generated forms (from objects)
    for (var i = 0; i < 3; i++) {
        addElement({
            label: "Some rich text editing :",
            tag: "richEditor",
        });
    }

    //We add the styling for checkboxes, file inputs and rich editors
    $(':checkbox').checkboxpicker();
    $(":file").filestyle({ buttonText: "File", buttonName: "btn-primary", placeholder: "No file" });
    $('#richEditor').summernote();
}

//This function add a single element to the form
function addElement() {
        //We create the group div (the whole element div)
        var newDiv = document.createElement("div");
        if(arguments[0].tag !== "richEditor"){
            newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
        }else{
            newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
        }

        //We create and add the label to the div
        var newLabel = document.createElement("label");
        if(arguments[0].tag == "richEditor"){
            newLabel.className = "col-xs-6 col-sm-5 control-label";
        }else{
            newLabel.className = "col-xs-6 col-sm-5 control-label";
        }
        newLabel.innerHTML = arguments[0].label;
        newDiv.appendChild(newLabel);

        //We create and add the input to the div
        var inputDiv = document.createElement("div");
        if(arguments[0].tag == "richEditor"){
            inputDiv.className = "col-xs-6 col-sm-7";
        }else{
            inputDiv.className = "col-xs-6 col-sm-7";
        }
        newDiv.appendChild(inputDiv);

    switch (arguments[0].tag) {
        case "richEditor":
            var newInput = document.createElement("div");
            newInput.className = "form-control";
            newInput.id = "richEditor";
            inputDiv.appendChild(newInput);
            break;
        default:
    }

    var mainRow = document.getElementById("mainRow");
    mainRow.appendChild(newDiv);
}

Would you have an idea on how to correct my code so the editor would actually load in the space I am giving it?

Solution

  • Bootstrap plugins depend on jQuery; they'll fail if it doesn't load first:

    Plugin dependencies

    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

    The defer attribute in your jQuery script loading tag is causing it to load after you call addAllElements in your onload event.

    defer

    This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. The defer attribute shouldn't be used on scripts that don't have the src attribute. Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.