Summernote 文本编辑器无法在生成 html 的简单 bootstrap 页面中工作

Question

我将 Summernote（bootstrap 的文本编辑器）添加到我正在测试表单生成器的小页面。我似乎根本无法在我的页面中找到编辑器，即使示例很简单。

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

这是我的 index.html 文件：

<!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>

这是我的 javascript 文件：

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

您是否知道如何更正我的代码，以便编辑器实际加载到我提供的 space 中？

Answer 1

Bootstrap plugins depend on jQuery；如果不先加载它们就会失败：

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 在您的 jQuery 脚本加载标记中导致它在 之后加载 您在 onload 中调用 addAllElements事件。

defer

此布尔属性设置为向浏览器指示脚本将在文档被解析后执行。由于此功能尚未被所有其他主要浏览器实现，作者不应假设脚本的执行实际上会被推迟。 defer 属性不应该用在没有 src 属性的脚本上。从 Gecko 1.9.2 开始，没有 src 属性的脚本会忽略 defer 属性。但是，在 Gecko 1.9.1 中，如果设置了 defer 属性，甚至内联脚本也会被延迟。

Summernote 文本编辑器无法在生成 html 的简单 bootstrap 页面中工作

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

javascript

twitter-bootstrap

code-generation

summernote

html-generation

Plugin dependencies