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 を含める必要があります)。サポートされている jQuery のバージョンを確認するには、bower.json を参照してください。

deferjQuery スクリプトの読み込みタグの属性により、イベントを呼び出した後にタグが読み込まれます。addAllElementsonload

defer

このブール属性は、ドキュメントが解析された後にスクリプトが実行されることをブラウザに示すために設定されます。この機能は他のすべての主要なブラウザーではまだ実装されていないため、作成者はスクリプトの実行が実際に延期されると想定すべきではありません。defer 属性は、src 属性を持たないスクリプトでは使用しないでください。Gecko 1.9.2 以降、src 属性を持たないスクリプトでは defer 属性が無視されます。ただし、Gecko 1.9.1 では、defer 属性が設定されている場合、インライン スクリプトも延期されます。

于 2016-06-17T16:16:11.433 に答える