0

我将Summernote（用于引导的文本编辑器）添加到我正在测试表单生成器的小页面中。即使示例很简单，我似乎也无法在我的页面中获得编辑器。

请参阅我制作的这个简化的 jsfiddle，它只有 2 行。

这是我的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);
}

您是否知道如何更正我的代码，以便编辑器实际加载到我给它的空间中？

4

1 回答 1

2

Bootstrap 插件依赖于 jQuery；如果不先加载，它们将失败：

插件依赖

一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于 jQuery（这意味着jQuery 必须包含在插件文件之前）。请查阅我们的 bower.json 以了解支持的 jQuery 版本。

jQuery 脚本加载标签中的defer属性导致它在您调用事件后加载。addAllElementsonload

defer

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

于 2016-06-17T16:16:11.433 回答